对于HTML+CSS来说,使用类选择器设置样式是一种常见的方法。一个标签元素可以绑定一个或一个以上的类选择器,根据不同的类选择器控制样式属性。在Vue.js中,可以使用v-bind绑定class选择器,下面利用一个实例说明,操作如下:
工具/原料
1
Vue.js
2
CSS3
3
HTML5
4
HBuilder
5
浏览器
6
截图工具
方法/步骤
1
第一步,通过快捷方式打开HBuilder,新建静态页面vbindclass.html,引入vue.js文件,如下图所示:
2
第二步,在body标签内插入一个div,设置它的ID属性;并在div元素内插入一个输入框,设置class属性,利用v-bind:class绑定class选择器,如下图所示:
3
第三步,利用类选择器设置输入框字体大小和字体属性,然后在div标签下方插入,使用vue.js方法调用和定义class,如下图所示:
4
第四步,保存代码并预览界面,结果发现class绑定上去了,但是样式没有起到作用,如下图所示:
5
第五步,修改代码,data对象绑定fontColor,并设置这个fontColor样式,如下图所示:
6
第六步,再次保存代码并预览效果,结果发现样式起到了作用,字体颜色变红,如下图所示:
注意事项
1
注意Vue.js中的v-bind指令的用法
2
注意v-bind指令绑定样式class方法