鍍金池/ 問答/HTML/ vue數(shù)據(jù)綁定問題

vue數(shù)據(jù)綁定問題

<!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 555},
      set(val){
        //這里的y有問題
        this.y=val;
         
      }
    }
     
  }
})
</script>
</body>
</html>

//以上代碼可以在瀏覽器中運(yùn)行
我的問題是y的出現(xiàn)了問題

回答
編輯回答
尛憇藌

data寫法有問題 可參見vue官網(wǎng) https://cn.vuejs.org/v2/style...
data: function () {

return {
  foo: 'bar'
}

}

2018年5月10日 21:26
編輯回答
夢(mèng)若殤

已經(jīng)搞定了，你們沒有懂我的意思。下面還是解決方案
<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>

2018年9月13日 12:04