$watch方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="watch">
<!-- name="li"默认值-->
firstName:<input type="text" name="li" v-model="firstName">
<br>
lastName:<input type="text" name="fei" v-model="lastName">
<p>fullName: {{fullName}}</p>
</div>
<script>
var vm = new Vue({
el: '#watch',
data: {
firstName: 'a',
lastName: 'fei',
fullName: 'a fei'
},
watch: {
// 第一个标签双绑定
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
// 第二个标签双绑定
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
</script>
</body>
</html>
$watch方法的用法说白了$watch这货就是观察一个值的变化，观察的这个值一变化的话，那么就执行function里面的语句。
在代码中，我们用watch方法监听了firstName和lastName这两个变量，我们在input框框那里做了双绑定，这样子的话，我们在firstName输入框中输入的值就会改变变量firstName的值，同理可得lastName，因为值的改变和watch这货的观察，所以watch里面的function代码就会运行，这样子fullName也就会相应地改变了。这样子$watch这方法的用法也就一下子明了了。上述的例子中$watch就和原生js里面的on-change差不多了。
Angular
7472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
