vue.js使用watch使页面显示我叫什么
时间: 2024-09-22 08:08:29 浏览: 41
几个你不知道的技巧助你写出更优雅的vue.js代码
Vue.js 中的 `watch` 是一种响应式监听机制,它允许你在数据变化时执行自定义函数。如果你想在页面上动态显示 "我叫什么",你可以这样做:
首先,你需要有一个数据属性来存储你的名字,例如在 Vue 实例的 `data()` 方法里设置:
```javascript
export default {
data() {
return {
userName: '默认名称' // 或者从服务器获取,如 this.userName = localStorage.getItem('name')
};
}
};
```
然后,你可以使用 `watch` 来监听 `userName` 的变化,并将其显示在一个模板元素上,比如 `<p>` 元素:
```html
<template>
<div>
<p>我叫{{ userName }}</p>
</div>
</template>
<script>
// ... 然后在 script 部分添加 watch
export default {
// ...
watch: {
userName(newName) {
this.$emit('update:userName', newName); // 如果你想通过自定义事件更新组件
// 或者直接更新 DOM
this.$el.querySelector('p').innerText = newName;
}
}
};
</script>
```
在这个例子中,如果你的数据发生变化(`this.userName`),`watch` 定义的函数会被触发,并更新页面上的文字。
阅读全文