vue计算属性
methods与computed的区别
computed是属性调用，而methods是函数调用；computed带有缓存功能，而methods不是；我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
VUE的监听属性
watch为VUE的监听属性，当监听的对象值改变时就会触发。
<div id='app'>
<input type="text" name="text" id="text" v-model="m" />
<button type="button" @click="fn">修改m的值
</button>
<h1>{{userTime}}
</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
m: 111,
userTime: "",
},
methods: {
fn() {
this.m = 6000
}
},
watch: {
m(newdata) {
this.userTime = (parseInt(newdata / 1000)) + "秒"
console.log(this.userTime)
},
}
})
</script>
用VUE属性做前端验证
<style type="text/css">
.norm{
border: 1px solid black;
}
.success{
border: 1px solid green;
}
.danger{
border: 1px solid red;
}
</style>
<div id='app'>
<input type="text" v-model.lazy="userid" :class="useridclass"/>
</div>
<script>
new Vue({
el: '#app',
data: {
userid: "",
useridclass:"norm"
},
watch: {
userid(newdata) {
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if(reg.test(newdata)){
this.useridclass="success"
}
else{
this.useridclass="danger"
}
}
}
})
</script>
VUE监听属性的触发机制
借鉴别人的代码例子如下：
<div id="computed_props">
分 :
<input type="text" v-model="minutes">
秒 :
<input type="text" v-model="seconds">
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
minutes: 0,
seconds: 0
},
methods: {},
computed: {},
watch: {
minutes: function(val) {
console.log("minutes监听")
this.minutes = val;
this.seconds = val * 60;
},
seconds: function(val) {
console.log("seconds监听")
this.minutes = val / 60;
this.seconds = val;
}
}
});
</script>
假设当我们在分的输入框输入6，则触发了minutes监听。在minutes监听方法中val=6、minutes=6、seconds=360，这时seconds 改变了值。继而触发seconds监听，在seconds监听方法中val=360、minutes=6、seconds=360。这里会再触发一次minutes监听，监听中发现minutes、seconds并没有改变，不再触发其他监听事件。
