目录watch配置项开启深度监视后期添加监听watch的写法watch和computed选择class与style绑定绑定字符串绑定数组绑定对象与style绑定侦听属性的变化其实就是监视某个属性的变化。当被监视的属性一旦发生改变时执行某段代码watch配置项监视属性变化时需要使用watch配置项可以监视多个属性监视哪个属性就把哪个属性的名字拿过来即可可以监视Vue的原有属性可以监视计算属性开启深度监视(1) 监视多级结构中某个属性的变化写法是’a.b.c’ : {}。无法直接监视对象深层次属性如a.bb属性压根不存在如果监视的属性具有多级结构一定要添加单引号a.b(2) 监视多级结构中所有属性的变化可以通过添加深度监视来完成deep : true默认是不开启深度监视的。后期添加监听调用APIvm.$watch(‘number1’, {})watch的写法watch: { //简写 num(new1, old) { console.log(new1); console.log(old); } }, watch: { //完整写法 a: { handler(n, o) { console.log(发生变化了); }, deep: true, // 初始化就执行handler函数 immediate: true, }, }写法主要分两种一种是函数的写法一种是方法的写法函数方式就直接定义处理函数但在遇到需要配置deep和immediate(初次执行)时就需要写完整写法写成方法格式包含handler和配置选项watch和computed选择computed和watch都能够完成的优先选择computed。如果要开启异步任务只能选择watch。因为computed依靠return。watch不需要依赖return。class与style绑定绑定字符串!doctype html html langen head meta charsetUTF-8 / titleClass绑定之字符串形式/title script src./js/vue.js/script style .static { border: 1px solid black; background-color: aquamarine; } .big { width: 200px; height: 200px; } .small { width: 100px; height: 100px; } /style /head body !-- 需求div有静态样式static大小是动态的 点击按钮更换应用不同的样式-- div idapp h1{{msg}}/h1 !-- 静态写法 有基本样式有大小 -- div classsmall static{{msg}}/div hr / !-- 动态写法动静都有 static是静态样式大小是指定的-- div classstatic :classc1{{msg}}/div button clickc1big变大/button button clickc1small变小/button !-- 适用场景如果确定动态绑定的样式个数只有1个但是名字不确定。 -- /div script const vm new Vue({ el: #app, data() { return { msg: Class绑定之字符串形式, c1: small, }; }, }); /script /body /html绑定数组!doctype html html langen head meta charsetUTF-8 / titleClass绑定之数组形式/title script src./js/vue.js/script style .static { border: 1px solid black; width: 100px; height: 100px; } .active { background-color: green; } .text-danger { color: red; } /style /head body div idapp h1{{msg}}/h1 !-- 静态写法 -- div{{msg}}/div br / !-- 动态写法动静结合 -- !-- 写法一、直接类名此时的类名必须要在css中被注册使用 -- div classstatic :class[active,text-danger]{{msg}}/div br / !-- 写法二、数组中放变量名 -- div classstatic :class[c1,c2]{{msg}}/div br / !-- 写法三、直接定义数组 -- div classstatic :classstyles{{msg}}/div !-- 适用场景当样式的个数不确定并且样式的名字也不确定的时候可以采用数组形式。 -- /div script const vm new Vue({ el: #app, data() { return { msg: Class绑定之数组形式, c1: active, c2: text-danger, styles: [active, text-danger], }; }, }); /script /body /html绑定对象​ !doctype html html langen head meta charsetUTF-8 / titleClass绑定之对象形式/title script src./js/vue.js/script style .static { border: 1px solid black; width: 100px; height: 100px; } .active { background-color: green; } .text-danger { color: red; } /style /head body div idapp h1{{msg}}/h1 !-- 动态写法动静结合 -- !-- 写法一、可以直接跟对象变量名 -- div classstatic :class{active:true,text-danger:false} {{msg}} /div br / !-- 写法二、可以跟对象的完整写法 -- div classstatic :classclassObj{{msg}}/div !-- 对象形式的适用场景样式的个数是固定的样式的名字也是固定的但是需要动态的决定样式用还是不用。 -- /div script const vm new Vue({ el: #app, data() { return { msg: Class绑定之对象形式, classObj: { // 该对象中属性的名字必须和css中样式名一致。 active: false, text-danger: true, }, }; }, }); /script /body /html ​与style绑定!doctype html html langen head meta charsetUTF-8 / titleStyle绑定/title script src./js/vue.js/script style .static { border: 1px solid black; width: 100px; height: 100px; } /style /head body !--需求 动态添加背景色 -- div idapp h1{{msg}}/h1 !-- 静态写法 -- div classstatic stylebackground-color: green静态写法/div br / !-- 动态写法字符串形式 -- div classstatic :stylec1动态写法字符串形式/div br / !-- 动态写法对象形式 -- div classstatic :style{backgroundColor:green,color:#fff} 动态写法1对象形式 /div br / div classstatic :stylestyleObj动态写法2对象形式/div br / !-- 动态写法数组形式 -- div classstatic :style[{ backgroundColor: green},{color: #fff },{fontSize:30px}]动态写法数组形式/div /div script const vm new Vue({ el: #app, data() { return { msg: Style绑定, c1: background-color: green, styleObj: { backgroundColor: green, color: #fff }, }; }, }); /script /body /html