vue的computed、watch和methods
参考了官方文档,总结如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="example">
<input type="text" v-model="firstname">
<input type="text" v-model="lastname">
<input type="text" v-model="fullname">
<input type="button" @click="getFullname()" value="点我">
</div>
</body>
<script>
var vm = new Vue({
el:'#example',
data:{
firstname:'xiao',
lastname:'ming',
fullname:''
},
computed: {// 直接计算它下面属性,不用管他有没有被动,至于牵涉到的属性都是直接计算得的
fullname: function () {
// `this` 指向 vm 实例
// return this.firstname.split('').reverse().join('')
return this.firstname+this.lastname;
}
},
watch:{// 只有有动watch下面动属性了才会触发他的操作
fullname:function () {
this.fullname = this.firstname+this.lastname;
}
},
methods: {
getFullname:function(){
this.fullname=this.firstname+this.lastname;
}
}
});
</script>
</html>
本文作者:蜗牛使劲冲
本文链接:https://www.cnblogs.com/warrenwt/p/18074563
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步