您的位置：首页 > Web前端 > Vue.js

Vue学习笔记五：数据监听watch计算属性computed

2020-03-11 12:34 645 查看

Vue学习笔记五：数据监听watch计算属性computed

Vue版本：2.5.21

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据监听watch计算属性computed</title>
</head>
<script src="../vue.js"></script>

<body>

<!--
watch监听单个，computed监听多个

*业务思考：
/类似淘宝，当我输入某个人名时，我想触发某个效果（watch）
/利用vue做一个简单的计算器（computed）

*类当watch监听的是复杂数据类型的时候需要做深度监听（写法如下）
/watch:{
msg:{
handler(val){
if(val.text=="love"){
alert(val.text)
}
},
deep:true//开启深度监听
}
}

*computed监视对象，写在函数内部，凡是函数内部有this.相关属性的，
改变都会触发当前函数
/每改变一个相关属性，触发一次当前函数
-->

<div id="app">
watch监听数据
<input type="text" name="" v-model="msg"><br>
computed计算属性
<input type="text" name="" v-model="n1">+
<input type="text" name="" v-model="n2">*
<input type="text" name="" v-model="n3">={{result}}
</div>

<script>
new Vue({
el: "#app",
data() {
return {
msg: '',
n1: '',
n2: '',
n3: '',

}
},
computed: {
result() {
return (Number(this.n1) + Number(this.n2)) * Number(this.n3)
}
},
watch: {
msg(newval,oldval){
console.log(newval,oldval);
if(newval=="love"){
alert(newval)
}
}
// msg: {
//     handler(newval, oldval) {
//         if (newval.text == "love") {
//             alert(newval.text)
//         }
//     },
//     deep: true,
// }
}
})
</script>
</body>

</html>

效果

watch

computed

  • 点赞
  • 收藏
  • 分享
  • 文章举报
INAGIML 发布了16 篇原创文章 · 获赞 0 · 访问量 82 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航