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对象中的值。

  • 相关阅读:
    流体力学笔记 第二章 流体力学的基本概念
    jvm常用的参数
    链表的反转
    数据流中的中位数
    二叉树对称
    二叉树镜像
    输入框校验
    判断单选或者复选框中选中的值
    网页中window.open 弹出 父页面和子页面数值交互
    数组去重
  • 原文地址:https://www.cnblogs.com/yzw-daemon/p/12842186.html
Copyright © 2011-2022 走看看