侦听器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ age }}</p>
<button @click="clickHandler">修改</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
msg:"alex",
age:30
}
},
methods:{
clickHandler(){
this.msg = "wusir";
this.age = 40;
}
},
watch:{
'msg':function(value){
console.log(value);
if (value == 'wusir'){
this.msg = "大无赦";
}
},
'age': function(value){
console.log(value);
if (value == 40){
this.age = 50;
}
}
}
})
</script>
</body>
</html>
计算属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{ myMsg }}</p>
<button @click="clickHandler">修改</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
msg:"alex",
age:30
}
},
methods:{
clickHandler(){
this.msg = "wusir";
this.age = 40;
}
},
computed:{
myMsg:function(){
return `我的名字叫${this.msg}, 年龄是${this.age}`;
}
}
})
</script>
</body>
</html>