CNode

vue中数据绑定问题

问答
Yyuanshuai007发布于8 年前最后回复8 年前5 回复2903 浏览0 收藏
查看回复

回复 (5)

L
lucky-leaf#1·8 年前

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>
Y
yuanshuai007#2·8 年前
引用 lucky-leafv model是双向绑定,但是你又设置了x的getter固定返回111,可参考下面代码实现y随x的变化而变化

@lucky-leaf 不好意思。我的x不写在data里面是因为要计算,这里x的getter固定返回111是简化了,我的项目中get里面是个函数。而y要必须要根据x计算一个值。什么破?谢谢!

L
lucky-leaf#3·8 年前

@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>
Y
ymwv#5·8 年前

good

参与回复
登录后即可参与回复。登录