属性绑定
什么叫属性绑定?我们分开来解读
属性:一个元素标签内,可以写很多东西,比如id,name,style,click等等。但是这些并不都叫属性,比如onclick就不算属性。而id,name就是属性。
那么绑定是什么意思呢?就是这些属性的值,是可以在vue构造器中的变量绑定起来,绑定起来有什么用呢?就可以控制了啊,通过更改vue构造器的data里面的变量的值,就可以自动让元素内的属性内容跟着变!
那么这个绑定要怎么写呢?vue的一系列属性,一旦绑定上,那么有一些写法都会和原生的产生变化。
我们本节课学的就是一个class属性绑定变化。众所周知,class是用来决定这个元素采用什么样式的。接下来我们要学的这个例子比较复杂,但是其实说白了,就是告诉你,我可以通过控制,来让这个元素一会用 某个样式,一会不用,来回换。
这里我们先不用关心,vue里面data里的use变量的值是怎么变的,我们只学习它变了之后,我们div标签的class属性是否也跟着一起变即可。
这里我们注意红线部分,可以发现
1.在元素中的 ,你想要绑定的属性名之前加上 v-bind: 即可实现绑定.
2.class的内容是一个字典字符串,其中的不同样式名字就当做key,启用不启用就看值是true还是false,不过这里我们因为想控制,所以把这个值用 变量use来顶替。
3.变量在元素标签外,是用{{ }}来包裹的,但是在元素标签的属性内容里,在最外层一个大引号内,就直接写出来就行。我认为,vue底层这是把这段字符串进行求值的操作:"{'class1': use}" 内部的class1因为是key,所以要用区别于外层引号的 单引号来包裹。而use作为变量,则不能被任何包裹,否则写成'use' 那么就会被当做字符串解读,就不会找到vue构造器中data里的那个use变量了。
4.其他的属性,诸如href等,估计也都是前面加v-bind: 来表示绑定起来了。
然后我们试着点了一下这个修改颜色,实现use变量从false变成true。结果发现这个div真的会自动启用上面的全局样式.class1,变成黑底白字:
大家暂时不用管这个use变量的值是如何变化的,这些我们之后会讲。本节课只要记住:【属性前面加v-bind: 属性里面写变量, 变量data里要有, data一变标签属性就变 】
即可。