Vue中监测数据变化
Vue中使用keyup
·
Vue中使用keyup
<el-form-item label="姓名:" prop="name">
<el-input
type="text"
v-model="userInfo.name"
autocomplete="off"
@keyup.native="changeUserInformation"
></el-input>
</el-form-item>
注意:在element-ui中需要@keyup.native,在普通的input中只需要 @keyup=“changeUserInformation”
在script中
methods: {
changeUserInformation(){
console.log("数据发生了变化1")
this.changeInformation = true;
},
关于Vue中keyup的补充:
事件代码 | 事件描述 |
---|---|
@keyup.enter | 回车按键松开触发 |
@keyup.left | 左键按键松开触发 |
@keyup.right | 右键按键松开触发 |
@keyup.up | 上键按键松开触发 |
@keyup.down | 下键按键松开触发 |
@keyup.delete | 删除键松开触发 |
其他监测数据变化方式:
- vue中提供了watch方法,它用于观察vue实列上的数据变动,来响应数据的变化。注意这种方法对我没有用处!因为我的是userInfo.name,如果v-model="userInfo"可能就能使用了(不过我没试过!);watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象
data(){
return {
example0:"",
example1:"",
}
},
watch:{
example0(newVal,oldVal){//监控单个变量
……
},
example2(newVal,oldVal){//监控对象
……
},
}
- computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
我之前使用过 AngularJS,所以对watch很熟悉。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。
后记:每天将自己工作和学习中遇到的问题和好的方法记录下来。
更多推荐
已为社区贡献3条内容
所有评论(0)