第十四课 模板样式绑定详细讲解
准备一个干净的页面
这里新建一个Demo14.html
,然后把Demo13.html
内容复制到Demo14.html
中,并改为下面最简单的样式。
1 | <!DOCTYPE html> |
写两个最基本的样式引入到模板
在文件的下方,我们写三个最进本的样式red
、green
和`background``,代码分别如下:
1 | <style> |
引用样式,在Vue的模板中引用和普通的html的方法一样。直接写class加上类名就可以了。
1 | template:` |
这时候你可以考虑一个问题,如果你希望程序足够灵活,样式也是可以控制的,这样引入样式的方法就不行了。你需要先在Data中声明变量,然后在模板template
中进行绑定。
声明data变量:
1 | data(){ |
有了这个变量(或者叫做数据项)以后,就可以用bind的形式进行绑定。
1 | <h2 v-bind:class="red">baidu.com</h2> |
绑定同样使用v-bind
,你也可以使用简写:
。上面的两种形式都可以进行绑定。这时候你可以到浏览器中查看一下效果,如果一切正常,此时应该还是红色的。
此时你可以利用浏览器的控制台,输入对应的代码,直接控制样式了。
1 | vm.$data.classString='green' |
Vue中用对象和数组的形式控制样式
对象的绑定方
比如现在用对象的形式进行绑定样式,好处是一次可以绑定多个样式。比如这样的代码。
1 | data(){ |
值为true
代表绑定,值为false
代表不绑定这个样式。
然后进行绑定
1 | template:` |
这时候再到浏览器中查看效果,就会有两个样式被绑定了red
和background
。如果你这首把red
改为false
,那效果就是只有背景颜色,没有字体颜色了。
数组的绑定方式
再来看一下数组的绑定方式,数组也是可以绑定多个样式的。
代码如下:
1 | data(){ |
这时候再修改一下绑定值,页面样式就变成了绿字,橙色的底啦。
1 | template:` |
你也可以在这种数组的数据项中,再嵌套对象的形式。
1 | classArray:['green','background',{red:true}], |
如果看不到效果,可以在CSS样式中增加!important
,当然你也可以在浏览器的控制台查看。