vue中数据绑定问题
发布于 6 年前 作者 yuanshuai007 2203 次浏览 来自 问答

<!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>

@lucky-leaf 可以兄弟,谢谢了!!!

回到顶部