Vue入门单个监听watch深度监听deep多个监听computed
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue入门单个监听watch深度监听deep多个监听computed相关的知识，希望对你有一定的参考价值。
watch单个监听computed多个监听
当watch监听复杂数据类型的时候需要做深度监听deep
watch深度监听deep表达式：
// 深度监听
watch:{
msg:{
handler(val, oldval){
if(val.text == ‘love‘){
alert(‘I Love You‘)
}
},
deep:true//开启深度监听
}
}watch深度监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app">
<div>watch监听器</div>
<input type="text" v-model="msg.text">
</div>
<script type="text/javascript">
new Vue({
el:‘#app‘,
data(){
return {
msg:{text:‘‘},
}
},
// 深度监听
watch:{
msg:{
handler(val, oldval){
if(val.text == ‘love‘){
alert(‘I Love You‘)
}
},
deep:true//开启深度监听
}
}
})
</script>
</body>
</html>watch监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app">
<div>watch监听器</div>
<input type="text" v-model="msg">
</div>
<script type="text/javascript">
new Vue({
el: ‘#app‘,
data() {
return {
msg: ‘‘
}
},
// 深度监听
watch: {
msg: {
handler(val, oldval) {
if (val == ‘love‘) {
alert(‘I Love You‘)
}
}
}
}
})
</script>
</body>
</html>computed多监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app">
<div>computed监听</div>
<br>
(<input type="text" v-model="n1">+
<input type="text" v-model="n2">)*
<input type="text" v-model="n3">={{result}}
</div>
<script type="text/javascript">
new Vue({
el:‘#app‘,
data(){
return {
n1:‘‘,
n2:‘‘,
n3:‘‘
}
},
// computed监听多个
computed:{
result(){
return (Number(this.n1)+Number(this.n2))*Number(this.n3)
}
}
})
</script>
</body>
</html>以上是关于Vue入门单个监听watch深度监听deep多个监听computed的主要内容，如果未能解决你的问题，请参考以下文章
Vue子组件(deep)深度监听props对象属性无效的解决办法