zoukankan      html  css  js  c++  java
  • Vue 多选列表 value取绑定值

    官方案例如下:

    <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 会忽略所有表单元素的 valuecheckedselected 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对象中的值。

  • 相关阅读:
    Python第一周作业
    turtle库的学习笔记
    绘制五角星
    绘制六角形
    绘制同心圆
    绘制叠加三角形
    Slash And Black Slash/正斜杠和反斜杠
    OpenCv中avi视频的读取问题,以及内部格式要求
    OpenCv和matlab对图像的读取
    个人项目进度
  • 原文地址:https://www.cnblogs.com/yzw-daemon/p/12842186.html
Copyright © 2011-2022 走看看