Vue侦听属性

发布时间：2023-04-18 15:02:39 所属栏目：教程来源：

导读：Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

侦听器 watch 是 Vue 提供的一种用来观察和响应 Vue 实例上的数据变化的属性。当被侦听的数据发生变化时，会触发对应的侦听函数。

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

侦听器 watch 是 Vue 提供的一种用来观察和响应 Vue 实例上的数据变化的属性。当被侦听的数据发生变化时，会触发对应的侦听函数。

使用侦听器

前面我们介绍了什么是侦听器 watch，那么如何定义一个侦听器呢？

侦听器 watch 实际是 vue 实例上的一个对象属性。当我们需要对 vue 实例上某个属性进行侦听时，我们以需要被侦听的属性名作为 watch 对象的键，以一个函数 function 作为该键的值。函数 function 接收两个参数：侦听数据变化之后的值newValue；侦听数据变化之前的值oldValue：

var vm = new Vue({
el: '#app',
data() {
return {
count:
}
},
watch: {
count: function(newVal, oldVal) {
// 具体处理逻辑
},
}
})
代码解释：
第 5 行，我们在 data 中定义了 Number 类型的数据 count。
第 8-12 行，我们在侦听属性 watch 中定义了侦听器 count。

在介绍完如何定义一个侦听器之后，让我们用几个实例来学习一下如何在项目中使用侦听器。

对字符串、布尔值、数字、数组类型的监听

假设当前项目中有以下需求，用户的购买商品页面：

当用户每次修改要购买商品名称的时候，都需要清空购买数量。
用户添加的数量在必须大于 0，并且当首次出现数量大于 10 的时候弹出数量超额提示，下次超过不再提示。
购物车数量发生变化时提示用户。
在我们写具体的代码逻辑之前，让我们先来分析一下如何使用侦听器watch来实现需求功能：

对于需求 1，我们需要对商品名称进行侦听，当它改变的时候将数量清零。
对于需求 2，我们需要对商品数量进行侦听，当商品数量首次超过 10 的时候，弹出对应提示；当商品数量小于 0 的时候，将数量改为 0。
对于需求 3，对购物车数据进行侦听，每次操作购物车数据时提示用户。
具体实现如下：
<!DOCTYPE html>
<html lang="en" style="background-color: #ccc;">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="background-color: #ccc;">
<div id="app">
<div>商品名称：<input v-model="name"/></div>
<button v-on:click="cut">减一个</button>
购买数量{{count}}
<button v-on:click="add">加一个</button>
<button v-on:click="addCart">加入购物车</button>
<div v-for="(item, index) in list" :key="index">
{{item.name}} x{{item.count}}
</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
name: '',
count:,
isMax: false,
list: []
},
methods: {
cut() {
this.count = this.count -
this.isMax = false
},
add() {
this.count = this.count +
},
addCart() {
this.list.push({
name: this.name,
count: this.count
})
}
},
watch: {
count: function(newVal, oldVal) {
if(newVal > ) {
this.isMax = true
}
if(newVal < ) {
this.count =
}
},
name: function() {
this.count =
this.isMax = false
},
isMax: function(newVal) {
if (newVal) {
console.log('注意：您购买的数量较大，请确认是否操作有误')
}
},
list() {
console.log('购物车数据发生改变')
}
}
})
</script>
</html>
代码解释：
在 html 代码中，我们给出一个商品名称输入框以及添加数量和减少数量的两个按钮。

代码第 4-9 行，我们定义了四个数据，分别是：
name — 商品的名称
count — 商品的数量
isMax — 是否首次超过数量 10
list — 购物车列表

代码第 10-24 行，我们定义了三个方法，分别是：
cut — 将数量 count - 1
add — 将数量 count + 1
addCart — 修改购物车数据

代码第 25-49 行，我们定义了四个侦听器，分别是：
name — 对数据 name 侦听，触发时将 count 变成 0；并将 isMax 变成 false
count — 对数据 count侦听，检测到 count 大于 10 时，将 isMax 变成 true，检测到 count 小于 0 的时候将 count 修改为 0。
isMax — 对数据 isMax 侦听，触发时，判断变化后的值是否为 true，当值为 true 时弹出提示消息
list — 对数据 list 侦听，每次改变时弹出提示消息。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!