vue添加类样式示例说明

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代码后，使用浏览器打开，可以看到字体已经变红