v-bind主要是用来动态的绑定一个或者是多个特性,可以使用多种数据类型。
废话不多说,先上程序。
Vue v-bind
样式改变效果
(1)定义CSS样式类font设置字体的大小为20像素,类classB设置颜色为蓝色,类classC设置颜色为褐色,类fontbig字体大小为30像素。
(2)对标签
绑定类变量ClassA ClassB ClassC,绑定id属性。其中classA绑定的是font,classB是否使用取决于变量isB的值是否为真,classC是否使用取决于变量isC的值是否为真,id的属性使用的是静态的值值为div1
(3)对标签绑定id使用的是静态的值button,绑定变量属性[test](属性为value)的值为变量value的值,绑定样式属性其中的color属性绑定的属性为变量color1的值,width属性的绑定变量bwidth的值,height的值绑定静态值30px。定义此标签的类型为按钮,设置点击事件,点击事件发生后修改变量classA的值为fontbig,value的值为样式改变效果,isC的值为真。
效果
(1)默认效果
可以清楚的看到div标签和input标签的属性和我们设置的是一致的。
(2)点击后的效果
点击按钮之后div和input标签的值和我们修改的是一样的 。
总结
使用v-bind可以绑定属性,可以使用变量,数组,结构体,静态值等数据类型。同时属性的值也可以使用变量来指定,但是需要vue2.6.0以后的版本才支持。使用双引号引用的数据是变量,单引号嵌套在双引号中的数据是静态值。