1.操作样式
格式：
<h1 :class="值">元素</h1> 值可以是对象、对象名、数组（数组的方式用的比较少）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .c1{ color:red; } .c2{ color:green; } </style> </head> <body> <div id="xx"> <!-- <p>淫湿一手</p>--> <!-- <p class="c1" :class="{c2:num<=10}">床前明月光</p>--> <!-- <p :class="{c1:num>10,c2:num<=10}">床前明月光</p>--> <p :class="xx">床前明月光</p> <!-- class类值控制语法: :class=‘{类值:判断条件(布尔值或者得到布尔值的算式),类值:判断条件....}‘ 布尔值或者得到布尔值的算式: 里面直接可以使用数据属性 --> </div> </body> <script src="vue.js"></script> <script> new Vue({ el:‘#xx‘, // #xx css选择器 data(){ return { num:11, xx:‘c1‘, } }, methods:{ jian(){ if (this.num>0){ this.num--; } } } }) </script> </html>
总结:
1. 给元素绑定class类名。 vue对象的data数据： data:{ myObj:{ complete:true, uncomplete:false, } } html元素： <div class="box" :class="myObj">2222</div> 最终浏览器效果： <div class="box complete">2222</div>
原文：https://www.cnblogs.com/xo1990/p/14645893.html