Vue提供了一个带有动态添加类的v-bind:class(:class)对象,可以使用:class动态切换类。在这种情况下,字体将使用:class设置为红色。
1.创建新的html代码页。
2.在html代码页上创建一个div,将id添加为app,并添加一段文本
3.介绍vue.js文件。引入带有scrtip标签的vue文件。
4.创建一个vue实例。创建一个新的脚本标记,并使用new Vue()创建一个实例。
代码:
script var app=new Vue({ El : ' # app ' })/script
5.用红色字体创建红色样式。在标题标签后创建一个样式标签,然后将字体设置为红色样式。
代码:
style.red { color: red}/样式
6.用:类添加红色类样式。在div标记中添加:class='{red:true} '。
7.保存html代码后,使用浏览器打开,可以看到字体已经变红