vue中数据绑定问题
<!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>Vue</title> <script src=“https://cdn.bootcss.com/vue/2.4.2/vue.min.js”></script> </head> <body> <div id=“app”> <input v-model=‘x’> <div>{{y}}</div> </div>
<script>
new Vue({
el: ‘#app’,
data: {
y:‘1’
},
computed:{
x:{
get(){return 111},
set(val){
//达不到效果
this.y=val;
}
}
} }) </script> </body> </html> //以上是完整的html可以在浏览器中直接运行 我的问题是 y的值会出错
5 回复
v-model是双向绑定，但是你又设置了x的getter固定返回111，可参考下面代码实现y随x的变化而变化
<div id="app">
<input type="text" v-model="x">
<div>{{ y }}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
x: 1
},
computed: {
y () {
return this.x
}
}
})
</script>
@lucky-leaf 不好意思。我的x不写在data里面是因为要计算，这里x的getter固定返回111是简化了，我的项目中get里面是个函数。而y要必须要根据x计算一个值。什么破？谢谢！
@yuanshuai007 不能将x的getter简化成常数，这样会导致修改input的时候，按下任意一个按键input直接变成那个常数，虽然y也会跟着变，可以将x的getter返回data里面的一个响应式属性，假定为z
<div id="app">
<input type="text" v-model="x">
<p>y: {{ y }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
z: 1,
y: 1
},
computed: {
x: {
get () {
return this.z
},
set (newValue) {
this.z = newValue * 2
this.y = newValue * 4
}
}
}
})
</script>
