Vue中如何使用v-model双向数据绑定select、checked等多种表单元素

简介: Vue中如何使用v-model双向数据绑定select、checked等多种表单元素

v-model 指令可以用在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

基础用法:

<div id="APP">
  <input type="text" v-model:value="tel" >
  <p>您的手机号:{{tel}}</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      tel: 15503931234,
    }
  },
});

:当我们修改输入框里的内容时,下方的内容也会跟着变化。也就是说我们修改内容时,改变了 data 中的数据,data 中的数据变化后又重新渲染了 p 标签里的内容。

v-model 与 v-bind 指令的区别:

<div id="APP">
  <input type="text" :value="tel" >
  <p>您的手机号:{{tel}}</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      tel: 15503931234,
    }
  },
});

:使用 v-bind 绑定数据,修改输入框里的内容时,下方的内容不会发生变化。也就是说我们修改内容时,不会改变 data 中的数据。

Vue 中两种数据绑定方式的区别:

单向数据绑定 v-bind :数据只能从 data 流向页面。

双向数据绑定 v-model :数据不仅能从 data 流向页面,还可以从页面流向 data 。

v-model 指令简写:

v-model:value 也可以简写为 v-model ,因为 v-model 默认收集的就是 value 值。

<div id="APP">
  <input type="text" v-model="tel" >
  <p>您的手机号:{{tel}}</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      tel: 15503931234,
    }
  },
});

:双向数据绑定一般都应用在表单类元素上(如:input、select等)。

textarea 多行文本使用 v-model:

<div id="APP">
  <textarea placeholder="请输入简介" v-model="content"></textarea>
  <p>您的简介:{{content}}</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      content: "",
    }
  },
});

单选按钮使用 v-model:

<div id="APP">
  <label>
    <input type="radio" value="男" v-model="sex"> 男
  </label>
  <label>
    <input type="radio" value="女" v-model="sex"> 女
  </label>
  <p>您已选择:{{sex}}</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      sex: "男",
    }
  },
});

:当选中时,sex 为 value 中的值。

单个复选框使用 v-model:

<div id="APP">
  <input type="checkbox" v-model="status">
  <p>是否选中:{{status}}</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      status: true,
    }
  },
});

:当选中时,status 为 true 。未选中时,status 为 false .

单个复选框指定 v-model 选中值:

<div id="APP">
  <input type="checkbox" v-model="status" true-value="同意" false-value="不同意">
  <p>您是否同意:{{status}}</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      status: "同意",
    }
  },
});

:当选中时,status 为同意 。未选中时,status 为不同意 。

多个复选框使用 v-model:

<div id="APP">
  <label>
    <input type="checkbox" value="草莓" v-model="list"> 草莓
  </label>
  <label>
    <input type="checkbox" value="蓝莓" v-model="list"> 蓝莓
  </label>
  <label>
    <input type="checkbox" value="火龙果" v-model="list"> 火龙果
  </label>
  <p>您已选择:{{list}}</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      list: ["草莓"],
    }
  },
});

:多个复选框,需要绑定到同一个数组上 。选中的值,会自动添加到数组中。

select 单选时使用 v-model:

<div id="APP">
  <select v-model="price">
    <option value="0">请选择</option>
    <option value="200">草莓</option>
    <option value="100">蓝莓</option>
    <option value="150">火龙果</option>
  </select>
  <p>您需要支付:{{price}} 元</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      price: 0,
    }
  },
});

:如果 v-model 表达式的初始值未能匹配任何选项,select 元素将被渲染为未选中状态。所以更推荐给 price 一个默认值。

select 多选时使用 v-model:

<div id="APP">
  <select v-model="list" multiple>
    <option value="草莓">草莓</option>
    <option value="蓝莓">蓝莓</option>
    <option value="火龙果">火龙果</option>
    <option value="香蕉">香蕉</option>
    <option value="苹果">苹果</option>
  </select>
  <p>您已选择:{{list}}</p>
</div>
const vm = new Vue({
  el: "#APP",
  data(){
    return {
      list: ["草莓","火龙果"],
    }
  },
});

:添加 multiple 属性后,按住 Ctrl 键再点击选项可以多选内容,多选时需要绑定到同一个数组上。

原创作者:吴小糖

创作时间:2023.2.28

目录
打赏
0
0
0
0
13
分享
相关文章
Vue实现动态数据透视表(交叉表)
Vue实现动态数据透视表(交叉表)
74 13
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具,适合自定义复杂的流程图。文章从环境要求(Node.js v20+ 和 Vue 3.3+)、基础入门案例、自定义功能(节点与连线的定制、事件处理)到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性,虽然预定义内容较少,但提供了丰富的 API 支持深度定制。同时,文中还分享了关于句柄(handles)的使用方法,以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid,总结 Vue Flow 更适合需要高度自定义和复杂需求的场景,并附带多个相关技术博客链接供进一步学习。
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
如何在 Vue 自定义组件中正确使用 v-model 进行数据的双向绑定?
如何在 Vue 自定义组件中正确使用 v-model 进行数据的双向绑定?
260 0
web前端面试高频考点——Vue组件间的通信及高级特性(多种组件间的通信、自定义v-model、nextTick、插槽)
web前端面试高频考点——Vue组件间的通信及高级特性(多种组件间的通信、自定义v-model、nextTick、插槽)
211 0
Vue:自定义v-model数据双向绑定
Vue:自定义v-model数据双向绑定
146 0
Vue:自定义v-model数据双向绑定
Vue自定义v-model
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82811783 ...
1127 0
|
4月前
|
vue使用iconfont图标
vue使用iconfont图标
187 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。