跳到主要内容
CNode

vue中数据绑定问题

问答
Yyuanshuai007发布于 8 年前最后回复 8 年前
529260
Vue
{{y}}
//以上是完整的html可以在浏览器中直接运行 我的问题是 y的值会出错
查看回复

回复 (5)

Y
ymwv#58 年前

good

L
lucky-leaf#38 年前

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

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

L
lucky-leaf#18 年前

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>

参与回复

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