Vue.js 监听属性
Vue.js 监听属性
Vue.js监视器或监听属性允许开发人员侦听组件数据并在更改特定属性时运行。 watcher或监听属性是Vue.js的一项独特功能，可让您关注组件状态的一个属性并在该属性值更改时运行一个函数。
让我们举个例子来看一下并学习关于VueJS中的监听属性。请参阅以下示例以了解监视程序或监视属性的概念。
Index.html文件:
<html>
<head>
<title>Vue.js Watch Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "wat_pro">
Kilometers : <input type = "text" v-model = "kilometers"><br/>
Meters : <input type = "text" v-model = "meters">
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#wat_pro',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
})
让我们使用简单的
CSS 文件使输出更具吸引力。
CSS 文件使输出更具吸引力。
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出:
输出:
您可以看到输出在其文本框中具有0条目。如果在"公里"文本框中输入一些值，则可以在"米"文本框中看到更改，反之亦然。让我们输入50英里为单位的文本框，然后查看结果。
输出:
现在，在仪表文本框中输入一些值，然后在公里文本框中查看更改。让我们在仪表文本框中输入5，然后在输出中查看结果。
输出:
示例说明
在上面的示例中，我们创建了两个文本框，一个带有公里，另一个与米。我们已经在data属性中将公里和米的两个文本框初始化为0。在这里，我们创建了一个监视对象，该对象具有公里和米两个功能。在这两个函数中，都完成了从公里到米的转换以及从米到公里的转换。
在任何一个文本框内输入值时，无论哪个更改，监听属性都将同时更新两个文本框。 。您不必分配任何事件或等待其更改并进行额外的验证工作。 监听属性负责使用在各个函数中完成的计算来更新文本框。
Vue.js计算与监视属性
如果您比较Vue。 js使用
Vue.js 监视属性计算属性，然后Vue.js监视属性提供了一种观察和做出反应的更通用方法数据更改。
Vue.js 监视属性计算属性，然后Vue.js监视属性提供了一种观察和做出反应的更通用方法数据更改。
如果您需要根据其他数据来更改某些数据，则使用监听属性非常简单明了，尤其是当您来自AngularJS背景时。但是，最好使用计算属性而不是命令式监视回调。
让我们举个例子，将其与监听属性和计算属性进行比较。
Index.html文件:
<html>
<head>
<title>Vue.js Watch Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="eg_1">{{ fullName }}</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#eg_1',
data: {
firstName: 'Alex',
lastName: 'Panda',
fullName: 'Alex Panda'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
输出:
您可以看到上面的代码是命令性的和重复的。现在，让我们将其与计算的属性示例进行比较:
Index.html文件:
<html>
<head>
<title>Vue.js Computed Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="eg_2">{{ fullName }}</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#eg_2',
data: {
firstName: 'Alex',
lastName: 'Panda'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
输出:
您可以看到两个示例给出的结果相同，但是第二个示例"计算机属性"示例更好而简洁。