当前位置：首页 > 技术分析 > 正文内容

10《Vue 入门教程》Vue 双向绑定指令

ruisui882周前 (04-11)技术分析6

1. 前言

本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单。我们可以用 v-model 指令在表单 、

描述是: {{ desc }}

<script src="https://unpkg.com/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { desc: '' }, }) </script>

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给输入框 textarea 和 desc 形成双向绑定，当 textarea 中数据发生改变时 desc 也会发生改变。同理，我们在控制台通过 vm.desc = "" 给 desc 赋值时输入框的内容也会发生改变。

3.3 单个复选框

实例演示




  
  
  
  Document


  
 
    

      
      
      选项: {{ isDelivery }}
    

  


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
    el: '#app',
  data: {
    isDelivery: false
  },
})
</script>

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给单个选择框 checkbox 和 isDelivery 形成双向绑定，当 checkbox 改变选中状态时 isDelivery 也会发生改变。同理，我们在控制台通过 vm.isDelivery = true 给 isDelivery 赋值时 checkbox 的选中状态也会发生改变。

3.4 多个复选框

实例演示




  
  
  
  Document


  
 
    

      
      
      
      
      
      
      

      类型: {{ types }}
    

  


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
    el: '#app',
  data: {
    types: []
  },
})
</script>

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给多个选择框 checkbox 和 types 形成双向绑定，当任意 checkbox 改变选中状态时 types 也会发生改变。同理，我们在控制台通过 vm.types = [] 给 types 赋值时对应 checkbox 的选中状态也会发生改变。

3.5 单选按钮

实例演示




  
  
  
  Document


  
 
    

      
      
      
      
      

      选择: {{ isFree }}
    

  


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
    el: '#app',
  data: {
    isFree: ''
  },
})
</script>

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给单选按钮 radio 和 isFree 形成双向绑定，当 radio 改变选中状态时 isFree 也会发生改变。同理，我们在控制台通过 vm.isFree = 0 给 isFree 赋值时 radio 的选中状态也会发生改变。

3.6 下拉选择框

实例演示




  
  
  
  Document


  
 
    

      
      选项: {{ company }}
    

  


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
    el: '#app',
  data: {
    company: ''
  },
})
</script>

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给选择框 select 和 company 形成双向绑定，当 select 改变选项时 company 也会发生改变。同理，我们在控制台通过 vm.company = 0 给 company 赋值时 select 的选中项也会发生改变。

4. 值绑定

对于单选按钮、复选框及选择框的选项，v-model 绑定的值通常是静态字符串 （对于复选框也可以是布尔值）：

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

4.1 复选框绑定值

代码解释： 上述代码中，我们通过 true-value 和 false-value 给 复选框指定来选中和非选中的值，当选中时 vm.isDelivery === 'yes'，当没有选中时 vm.isDelivery === 'no'

4.2 单选按钮绑定值


// 当选中时
vm.pick === vm.a

代码解释： 上述代码中，我们通过 v-bind:value 给 randio 指定选中的值，当 radio 选中时 vm.pick === vm.a。

4.3 选择框选项绑定值

代码解释： 上述代码中，我们通过 v-bind:value 给 option 指定 value 值，当 该 option 选中时 vm.selected 的值为 { number: 123 }。

5. 修饰符

5.1 .lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 （除了上述输入法组合文字时）。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

5.2 .number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

5.3 .trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

6. 小结

本小节我们介绍了 Vue 数据双向绑定 v-model 的使用，主要包括以下知识点：

  • 使用 v-model 对 input、textarea、select 等表单项进行数据绑定；
  • 使用 v-bind:value 给表单项的值进行绑定；
  • v-model 修饰符的使用。

扫描二维码推送至手机访问。

版权声明：本文由ruisui88发布，如需转载请注明出处。

本文链接：http://www.ruisui88.com/post/3414.html

标签: vue 修饰符
分享给朋友：
返回列表

上一篇：Vue 2 和 Vue 3的区别

下一篇：初学Vue(一) -- Vue简单入门

“10《Vue 入门教程》Vue 双向绑定指令” 的相关文章

祸害阿里云宕机3小时的IO HANG究竟是什么?

本文来自微信公号“CSDN”（ID：CSDNnews），作者 | 王知无， 责编| 郭 芮。2019年3月3日凌晨，微博炸锅，有网友反映说阿里云疑似出现宕机，华北很多互联网公司受到暴击伤害，APP、网站全部瘫痪，我自己的朋友圈和微信群里也有好友反馈，刚刚从被窝被叫起来去修Bug，结果发现服务器登不上...

Vue中的路由配置常用属性

router：路由页面跳转的核心库；引入路由：import VueRouter from 'vue-router'; 注册路由：const router = new VueRouter({ })mode:模式路由有hash history两种模式:hash模式URL中包含#，#后边是...

微信外H5跳转小程序——组件(vue项目)

场景有个H5（vue项目），需要实现点击商品item跳转到小程序，微信内和微信外都要支持，这里我们只介绍一下H5在微信外的跳转。如图所示，红框内是一个商品，就是点击这里，要跳转小程序：配置微信小程序云开发（云函数）1、开通云开发然后选择免费额度2、云开发权限设置找到权限设置，把这里的「未登录用户访问...

VUE3+JAVA商城源码小程序APP商城

三勾小程序商城基于springboot+element-ui+uniapp打造的面向开发的小程序商城，方便二次开发或直接使用，可发布到多端，包括微信小程序、微信公众号、QQ小程序、支付宝小程序、字节跳动小程序、百度小程序、android端、ios端。软件架构后端： springboot2.3.12管...

原生微信小程序打包成安卓/IOS应用!#小程序开发

原生微信小程序打包成公。好消息，微信小程序可以直接打包成APP了你们知道吗？微信团队近日开发了一个多端开发平台。多端据文档描述，多端开发框架是支持使用小程序原生语法开发移动端应用的框架。开发者可以一次编码分别编译为小程序安卓以及iOS应用，实现多端开发。我们进入多端框架开发的文档，来看看怎么使用微信...

首批龙芯3A6000电脑规模化应用:内置QQ、微信主流软件

6月18日消息，今日，龙芯中科宣布，近千台龙芯3A6000电脑走进福建福州某区各科室并服务于具体工作开展。据介绍，该批电脑为实现首批规模化应用的3A6000整机产品，搭载国产操作系统，内置主流办公和即时通讯等软件，可充分满足打印机利旧要求（兼容原有打印机设备）。3A6000根据官方晒出的桌面截图显示...

蜀ICP备2024111239号-14