vue watch: demo
时间: 2023-11-25 16:52:24 浏览: 98
vue-demo
根据提供的引用内容,我们可以了解到Vue.js中的$watch是一个非常重要的知识点,用于检测数据变动。下面是一个简单的Vue.js $watch的demo:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js $watch Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>原始值:{{ message }}</p>
<p>修改后的值:{{ newMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
watch: {
message: function(newVal, oldVal) {
this.newMessage = newVal + ' - Modified';
}
},
mounted: function() {
this.message = 'Hello, World!';
}
});
</script>
</body>
</html>
```
在这个demo中,我们定义了一个Vue实例,其中包含一个data属性message和一个watch属性message。当message的值发生变化时,watch属性中的函数会被调用,将新的值赋给newMessage属性。在mounted函数中,我们修改了message的值,触发了watch函数,从而修改了newMessage的值。
阅读全文