vue - 计算属性监听自定义指令
Posted it123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue - 计算属性监听自定义指令相关的知识，希望对你有一定的参考价值。
1.计算属性
<div id="app">
<input type="text" v-model="x">
<input type="text" v-model="y">
{{get}}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
x:"",
y:""
},
computed:{
get:function(){
return this.x+this.y;
}
}
});
</script>我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值；多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。
2.使用侦听器
<body>
<div id="app">
<input type="text" v-model="msg">
{{msg}}
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"",
},
watch: {
msg:function(newval,oldval){
if(newval=="admin"){
this.msg=oldval;
}else{
this.msg=newval;
}
}
},
});
</script>我们发现，与计算属性相比，侦听器并没有优势；也不见得好用，直观上反而比计算属性的使用更繁琐；虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
3.自定义指令
<body>
<div id="app">
<p v-color>123131321</p>
</div>
</body>
<script>
//全局指令
// Vue.directive("color",{
// inserted:function(el){
// el.style.background="red";
// }
// });
var app=new Vue({
el:"#app",
directives:{
color:{
inserted:function(el){
el.style.background="green";
}
}
}
});
</script>以上是关于vue - 计算属性监听自定义指令的主要内容，如果未能解决你的问题，请参考以下文章