javascript - v-model 的 this['key'] 和 $data['key'] 有什么区别？

Question

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

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

似乎v-model为 .bin 绑定了一个克隆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>

标签： javascriptvue.js

Answer 1

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