watch 双引号写法
时间: 2023-08-21 11:13:21 浏览: 54
引用[1]:如果我们想要使用双引号的方式来写 watch,可以将 watch 的属性名用双引号包裹起来,如下所示:
```javascript
watch: {
"firstName": {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
immediate: true
}
}
```
引用[2]:这样修改过后的 watch 代码可以在最初绑定的时候就执行。例如,我们可以将上面的代码应用到以下的 Vue 实例中:
```html
<div>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</div>
new Vue({
el: '#root',
data: {
firstName: 'Dawei',
lastName: 'Lou',
fullName: ''
},
watch: {
"firstName": {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
immediate: true
}
}
})
```
这样,当页面加载时,watch 会立即执行一次,将 firstName 和 lastName 的值拼接起来赋给 fullName。[2]
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)