如果一个元素没有在data属性中进行初始化,可以通过computed计算属性进行赋值 ,但无法无通methods中的函数进行赋值。但因为computed中的返回是一个函数,所以如果函数中对应的返回值 发生了变化,元素的值 还是可以发生变化的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app-one">
<h2>{{title}}</h2>
<p>{{say}}</p>
</div>
<div id="app-two">
<h2>{{title}}</h2>
<p>{{say}}</p>
<button @click="changeTitle">改变第一个对象中title属性</button>
</div>
<script>
var one= new Vue({
el: '#app-one',
data:{
title:'app-one的内容'
},
computed:{
say:function(){
return 'Hello One';
}
}
})
var two= new Vue({
el: '#app-two',
data:{
title:'app-two的内容'
},
methods:{
changeTitle:function(){
one.title="已经改名了";
one.say='这个修改是无效的。'//这里的赋值 ,将不会改变say的内容
}
},
computed:{
say:function(){
return one.title; //这里会随着title的改变,而改变say的值
}
}
})
</script>
</body>
</html>