1.监视属性
基本监视
watch:
- 当被监视的属性变化时，回调函数自动调用，进行相关操作。
- 监视的属性必须存在，才能进行监视！！
- 监视的两种写法：
- new Vue时传入watch配置
- 通过vm.$watch监视
<script> new Vue({ el: '#root', data() { return { isHot: true } }, watch: { isHot: { handler(newValue, oldValue) { console.log('值发生改变了'); console.log(newValue, oldValue); } } } }); </script>
深度监视
- Vue中的watch默认不监测对象内部值的改变（一层）。
- 在配置deep: true可以监测对象内部值改变（多层）。
备注：
- Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
- 使用watch时根据数据的具体结构，决定是否采用深度监视。
<script> new Vue({ el: '#root', data() { return { user: { name: '', age: null } } }, watch: { user: { deep: true, handler(newValue, oldValue) { console.log('值发生改变了'); console.log(newValue, oldValue); } } } }); </script>
简写方式
当只需要配置handler函数的时候可以采用简写的方式。（类似于计算属性的简写方式）
<script> new Vue({ el: '#root', data() { return { user: { name: '', age: null } } }, watch: { user(newValue, oldValue) { console.log('值发生改变了'); console.log(newValue, oldValue); } } }); </script>
2. 绑定样式
class绑定
- 字符串写法。适用于：样式的类名不确定，需要动态指定。
<body> <div id="root"> <div @click="changeMood" class="basic" :class="mood"></div> </div> </body> <script> new Vue({ el: '#root', data() { return { mood: 'normal' } }, methods: { //字符串方式更改样式 changeMood() { this.mood = 'sad'; } }, }) </script>
- 数组写法。适用于：要绑定的样式个数不确定，名字也不确定。
<body> <div id="root"> <div @click="changeMood2" class="basic" :class="moodArr"></div> </div> </body> <script> new Vue({ el: '#root', data() { return { moodArr: ['normal', 'sad', 'happy'] } }, methods: { //字符串方式更改样式 changeMood2() { this.moodArr = ['sad']; } }, }) </script>
- 对象写法。适用于：要绑定的样式个数确定、名字也确定。但要动态决定用不用。
<body> <div id="root"> <div @click="changeMood3" class="basic" :class="moodObj"></div> </div> </body> <script> new Vue({ el: '#root', data() { return { moodObj: { normal: true, sad: false, happy: true } } }, methods: { //字符串方式更改样式 changeMood3() { this.moodObj.happy = false; } }, }) </script>
style绑定
- 对象方式绑定。
<body> <div id="root"> <div @click="changeMood3" :style="styleObj" :class="moodObj"></div> </div> </body> <script> new Vue({ el: '#root', data() { return { styleObj: { color: 'red' }, styleArr: [{ fontSize: '40px', color: 'red' }, { backgroundColor: 'red' }] } }, methods: { }, }) </script>
- 数组方式绑定。
<body> <div id="root"> <div @click="changeMood3" :style="styleArr" :class="moodObj"></div> </div> </body> <script> new Vue({ el: '#root', data() { return { styleArr: [{ fontSize: '40px', color: 'red' }, { backgroundColor: 'red' }] } }, methods: { } }) </script>
