Vue实例的属性 计算属性

body部分：

<div id="app">
{{message}}
<p ref='hello'>你好</p>
</div>
js部分：

var vm=new Vue({
el:'#app',
data:{
message:'hello world'
},
uname:'jack',
age:18
})

//el 获取Vue绑定的元素 console.log(vm.el)
vm.el.style.color='pink' //data 获取Vue实例中的数据 console.log(vm.data)
//options 获取Vue实例中的自定义属性
console.log(vm.options.uname) console.log(vm.options.age)
//refs 获取所有带ref属性的元素
console.log(vm.refs) console.log(vm.refs.hello)
计算属性：
案例：hello Vue变成 Vue===hello 虽然{{}}可以解析数据，但是{{}}中不能写复杂的逻辑属性，所有复杂的业务逻辑都要使用计算属性

<div id='itany'>

<h1>{{msg}}</h1>
<a href="#">{{revMsg}}</a>
</div>

new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
computed:{
revMsg:function(){
return this.msg.split(' ').reverse().join('===')
}
}
})

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容