您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
侦听器
发布时间：2020-02-16 21:41:47编辑：雪饮阅读（）
侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
template: `<input type="number" v-model="price">`,
data() {
return {
price:0.00
}
},
//这里定义了price侦听器，将会自动侦听price属性的变化
watch:{
price:function(newV,oldV){
if(newV>100){
console.log("100");
}
}
}
});
</script>
</body>
</html>
深度侦听器
深度侦听器用于侦听对象等复杂值
<script type="text/javascript">
new Vue({
el: '#app',
template: `<input type="number" v-model="stus.age">`,
data() {
return {
stus:{name:'杜敏捷',age:24}
}
},
watch:{
stus:{
deep:true,
handler:function(newV,oldV){
console.log("newV",newV);
console.log("oldV",oldV);
}
}
}
});
</script>
关键字词：vue,侦听器
上一篇：全局过滤器
下一篇：getter与setter