为什么 v-text 不能显示字符串

Question

我尝试使用v-text. 但它什么也没显示。

试过的代码

ccc.把手

<div id="app">
  <div class="input-group mb-3">
    <input type="text" class="form-control" v-text="getValues[0].value">
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      'bulk': {{{bulks}}}
    },
    computed: {
      getValues: function() {
        return this.bulk;
      }
    },
    methods: {},
  });
</script>

getValues 返回 JSON

[
  { name: "Dauth", age: "18", value: "TGFR123" }
]

我想TGFR123在文本框中显示

以上getValues返回正确的 JSON。但v-text="getValues[0].value"不显示字符串。帮我解决这个问题。

Answer 1

v-text不适用于input.

如果要设置输入的值，请使用:value或v-model

var app = new Vue({
  el: '#app',
  data: {
    bulk: [{
      name: "Dauth",
      age: "18",
      value: "TGFR123"
    }]
  },
  computed: {
    getValues: function() {
      return this.bulk;
    }
  },
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div id="app">
  Bind : <input type="text" :value="getValues[0].value">
  v-model : <input type="text" v-model="getValues[0].value">
  <div>Result : {{getValues[0].value}}</div>
</div>

使用 v-model 数据将随着用户输入而改变

文字

值绑定