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>
