Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox（多选）、checked（值的绑定）、select以及修饰符的使用-阿里云开发者社区

Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox（多选）、checked（值的绑定）、select以及修饰符的使用

2023-04-19 190

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： v-model的使用原理、结合radio、checkbox、checkbox（多选）、checked（值的绑定）、select以及修饰符的使用

一、v-model使用原理

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

先看一下简单的v-model使用

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>v-model的基本使用</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
    <h1>{{message}}</h1>
    <input type="text" v-model="message" />
    <input type="text"v-model="message" />
  </div>
  <script type="text/javascript">
    const vm = new Vue({
    el:'#app',
    data:{
      message:'Nanchen'
    },
    })
  </script>
  </body>
</html>

效果如下：

为什么要用到v-model？

使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。

其使用原理：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>v-model的使用原理</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
    <h1>{{message}}</h1>
    <input type="text" @input="changeValue"  :value="message" />
    <!-- <input type="text"v-model="message" /> -->
  </div>
  <script type="text/javascript">
    const vm = new Vue({
    el:'#app',
    data:{
      message:'Nanchen'
    },
    methods:{
      changeValue(e){
      console.log(e);
      this.message = e.target.value
      }
    }
    })
  </script>
  </body>
</html>

oninput 事件在用户输入时触发。

详情请参考菜鸟教程oninput

效果与上图一致。

二、v-model结合radio单选按钮使用

以前写单选按钮：

<label for="one">
  <input type="radio" name="sex" id="one" value="男"/>男
</label>
<label for="two">
  <input type="radio" name="sex" id="two" value="女"checked="checked" />女
</label>
<h1></h1>

现在要实现双向绑定功能，就是点击哪个性别就会显示在h1里

这里就可以把name去掉，添加v-model

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
    <label for="one">
    <input type="radio" id="one" value="男" v-model="sex" />男
    </label>
    <label for="two">
    <input type="radio" id="two" value="女" v-model="sex"/>女
    </label>
    <h5>{{sex}}</h5>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
    el:'#app',
    data:{
      sex:'男'
    },
    })
  </script>
  </body>
</html>

三、v-model结合checkbox类型的使用

这里实现一个同意协议的小功能，先看效果：

代码如下：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
    <h1>复选框</h1>
    <label for="one">
    <input type="checkbox"id="one" v-model="isAgree" />同意协议
    </label>
    <br>
    您选择的是：{{isAgree}}
    <br>
    <button type="button" :disabled="!isAgree">下一步</button>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
    el:'#app',
    data:{
      isAgree:true
    },
    })
  </script>
  </body>
</html>

四、v-model结合checkbox类型使用（多选）

先看实现效果：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
    <label for="hobby">
    <input type="checkbox" id="hobby" value="篮球" v-model="hobbies">篮球
    </label>
    <label for="hobby1">
    <input type="checkbox" id="hobby1" value="足球" v-model="hobbies">足球
    </label>
    <label for="hobby2">
    <input type="checkbox" id="hobby2" value="羽毛球" v-model="hobbies">羽毛球
    </label>
    <label for="hobby3">
    <input type="checkbox" id="hobby3" value="排球" v-model="hobbies">排球
    </label>
    <h2 v-show="hobbies.length>0">{{hobbies}}</h2>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
    el: '#app',
    data: {
      hobbies:[]
    },
    })
  </script>
  </body>
</html>

五、v-model结合checkbox类型使用（值的绑定）

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
    <label :for="index" v-for="(item,index) in arr" :key="index">
    <input type="checkbox" :name="'hobby'+index"  :id="index" :value="item" v-model="hobbies"  />
    {{item}}
    </label>
    <h2 v-if="hobbies.length>0">{{hobbies}}</h2>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
    el:'#app',
    data:{
      hobbies:[],
      arr:['篮球','足球','羽毛球','排球'],
    },
    })
  </script>
  </body>
</html>

六、v-model结合select

1.select单选

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>select单选</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
    <select name="fruit" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="橘子">橘子</option>
    <option value="水蜜桃">水蜜桃</option>
    <option value="橙子">橙子</option>
    </select>
    <h3>你选择的水果有：{{fruit}}</h3>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
    el:'#app',
    data:{
      fruit:'苹果',
    },
    })
  </script>
  </body>
</html>

效果如下：

2.select多选

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>select多选</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
    <select name="fruits" v-model="fruits" multiple="multiple">
    <option value="苹果">苹果</option>
    <option value="橘子">橘子</option>
    <option value="水蜜桃">水蜜桃</option>
    <option value="橙子">橙子</option>
    </select>
    <h3 v-show="fruits.length>0">你选择的水果有：{{fruits}}</h3>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
    el:'#app',
    data:{
      fruits:[],
    },
    })
  </script>
  </body>
</html>

效果如下：

七、v-model的修饰符的使用

v-model的修饰符：

1、v-model.lazy 只有在input输入框发生一个blur时才触发

2、v-model.trim 将用户输入的前后的空格去掉

3、v-model.number 将用户输入的字符串转换成number

这里看这个例子

v-model.lazy

只有在input输入框发生一个blur时才触发

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <div id="app">
   <h2>{{message}}</h2>
          <input type="text" v-model.lazy="message"/>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
    el: "#app",
    data: {
      message:'Nan',
      age:30,
      name:'chen'
    },
    })
  </script>
  </body>
</html>

效果如下：

v-model.number ：不可以输入字符串

看例子：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <div id="app">
     <input type="number" v-model.number="age" />
     <h2>{{age}}----{{typeof age}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
    el: "#app",
    data: {
      message:'Nan',
      age:30,
      name:'chen'
    },
    })
  </script>
  </body>
</html>

效果如下：这里输入字符串是输入不了的

v-model.trim

去除前后空格

代码如下：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <div id="app">
     <input type="text" v-model.trim="name">
    <h2>{{name}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
    el: "#app",
    data: {
      message:'Nan',
      age:30,
      name:'chen'
    },
    })
  </script>
  </body>
</html>

效果如下图：

Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox（多选）、checked（值的绑定）、select以及修饰符的使用

一、v-model使用原理

为什么要用到v-model？

二、v-model结合radio单选按钮使用

三、v-model结合checkbox类型的使用

四、v-model结合checkbox类型使用（多选）

五、v-model结合checkbox类型使用（值的绑定）

六、v-model结合select

1.select单选

2.select多选

七、v-model的修饰符的使用

v-model.lazy

v-model.trim

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox（多选）、checked（值的绑定）、select以及修饰符的使用

一、v-model使用原理

为什么要用到v-model？

二、v-model结合radio单选按钮使用

三、v-model结合checkbox类型的使用

四、v-model结合checkbox类型使用（多选）

五、v-model结合checkbox类型使用（值的绑定）

六、v-model结合select

1.select单选

2.select多选

七、v-model的修饰符的使用

v-model.lazy

v-model.trim

热门文章

最新文章

相关课程

相关电子书