javascript - v-model 的这个 ['key' ] 和 $data ['key' ] 之间有什么区别？

Question

请查看下面的代码片段，共有三个演示，前两个演示工作正常(v-model 工作正常)。

但对于最后一个，当您在 <input> 中输入内容时，你会看到this['test 1']不会更新。 <h2>Name:<span>{{this['test 1']}}</span></h2>始终是初始值。

看来v-model绑定(bind)一个克隆 this['test 1'] 。我们必须使用$data['test 1']对于这种情况。

有谁知道造成差异的原因吗？

app = new Vue({
  el: "#app",
  data () {
    return {
    'test': "Cat in Boots",
    'test 1': 'Snow White'
    }
  },
  methods: {
    testCase1: function(){
      this['test'] = 'I am Cat in Boots' //works
      this['test 1'] = 'I am Cat in Boots' //works
    }
  }
})

span {
  background-color:green
}

a {
  color:red
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    <button @click="testCase1()">Test Case 1</button>It will change the data successfully.
    <h2>Name:<span>{{test}}</span></h2>
    <input v-model="test">
    <h2>Name:<span>{{$data['test 1']}}</span></h2>
    <input v-model="$data['test 1']">
    <h2>Name:<span>{{this['test 1']}}</span></h2>
    <input v-model="this['test 1']"><a>Type something in this input, the name will not be changed.</a>
</div>

Answer 1

您不能在模板中使用 this，因为它不引用模板中的组件，因此在这种情况下需要使用 $data