vue v-for

Question

<div id="app">
      <ul>
          <li v-for="item in items">
            {{item}}
          </li>
      </ul>
</div>
var app = new Vue({
          el: '#app',
          data:{
            items:[21,24,89,19,67,100,90]
          },
          computed:{
          items:function(){
              return [1,2,3,4,5,6,7]
          }
          }
      })

我看视频上讲的可以在computed里面修改data里面的数据，为什么这样循环出来的数据不是[1,2,3..]这个数组的数据呢

Answer 1

你这样应该会报错，如果你要使用computed属性选项的话，只需要在data里只定义不赋值就行了。

Answer 2

computed:{
   this.items=[1,2,3,4,5,6,7]
    }

Answer 3

1.computed跟data里的变量重复声明会报错
2.要修改data里的数据，需要用this访问
computed:{

            list:function(){
                this.items = [1,2,3,4,5,6,7];
            }
        }

Answer 4

window.onload = function(){

            var vm = new Vue({
              el:'#app',
              data: { 
                  item: [20,30,50,80,100,22,33,25]
              },
              computed: {
                // 读取和设置
                aPlus: {
                  get: function () {
                    return this.item = [1,2,3,4,5,6]
                  }
                }
              }
            })
            vm.aPlus
        }

解释请看这里https://cn.vuejs.org/v2/api/#...

Answer 5

这是两件不同的事情：①定义一个计算属性修改data里面的数据；②定义一个计算属性返回数据。计算属性，data，以及props的名字不要取的一样。