Vue 多选列表 value取绑定值

Posted 2020-11-29 yzw-daemon

官方案例如下：

<div id=‘example-3‘>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: ‘#example-3‘,
  data: {
    checkedNames: []
  }
})

 

对v-model的解释如下：

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 javascript 在组件的 data 选项中声明初始值。

 

需求：value 取值改为 Vue对象中的值，而非静态值

 

方案： v-bind:value="getValue" ,即可。

v-bind官方解释：

Attribute

Mustache 语法不能作用在 html attribute 上，遇到这种情况应该使用 v-bind 指令：

意思就是v-bind用于绑定属性值，形式如下：

v-bind:attribute     简写形式   :attribute

 

结语：用到知识，才能对知识有更好的体会。 axios 对象中需要用 that 代替 this关键值的值，因为this 在对象中有默认特殊语义，那就是指向当前对象（axios对象中使用，当然是指向axios），所以，需要通过没有特殊语义的that来更改vue对象中的值。