Vue v-model的使用

最新推荐文章于 2023-08-10 09:34:48 发布

almostall

最新推荐文章于 2023-08-10 09:34:48 发布

阅读量134

点赞数

分类专栏： Vue知识点文章标签： vue

本文链接：https://blog.csdn.net/weixin_45364670/article/details/109364843

版权

Vue知识点专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-model的使用

v-model在Vue用于表单值和数据的双向绑定

基本使用

<body>
  <div id="app">
    <!-- <input type="text" v-model="message"> -->
    <!-- 等同于以下代码，使用v-bind和v-on两个指令实现双向绑定 -->
    <!-- input表单有一个input事件，当表单中的内容产生变化时触发 -->
    <!-- $event获取当前事件 -->
    <input type="text" :value="message" @input="message=$event.target.value">
    {{message}}
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        message: "v-model的基本原理"
      },
      methods: {},
      computed: {}
    });
  </script>
</body>

在这里插入图片描述

当表单中的内容随data中的message改变而改变，同样的message也随表单内容改变而改变。

v-model结合radio使用

<body>
  <div id="app">
<label for="male">
  <input type="radio" name="sex" value="男性" id="male" v-model="sex"> 男
</label id="female">
  <input type="radio" name="sex" value="女性" id="female" v-model="sex"> 女
  <label>
    {{sex}}
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        sex:'女性'
      },
      methods: {},
      computed: {}
    });
  </script>

v-model结合checkbox使用

v-model结合checkbox使用需要注意的是单选和多选两种情况。当为单选复选框时，此时绑定的value值为true和false，常见用用户勾选同意协议以进行下一步一类操作。多选复选框时绑定的值就是value。

 <!-- 单个复选框，绑定的值为 true 和 false -->
    <label for="lisence">
      <input type="checkbox" v-model="isAgree" id="lisence">阅读并同意协议
    </label>   <br />
    <input type="radio" :disabled="!isAgree">下一步
    <!-- 复选 -->
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    {{hobbies}}
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        isAgree:'',
        hobbies:[]
      },
      methods: {},
      computed: {}
    });
  </script>

在这里插入图片描述

v-model还可以与其它表单项如select，password结合使用，此处不再列举。

v-model修饰符
- lazy 默认情况下v-model在input事件中同步输入框的数据，lazy修饰符可以让数据失去焦点或者回车时才更新 –
- number 默认情况下无论输入框输入的是数字还是文本，都会被当成String类型处理，number修饰符是将其装换成数字类型
- trim,自动过滤输入内容首尾含有的空格

<div id="app">
    
    <input type="text" v-model.lazy="message1" >{{message1}}
   
    <input type="number" v-model.number="message2"> 
   
    <input type="text" v-model.trim="message3">{{message3}}
  </div>

almostall

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue v-model的使用

v-model的使用v-model在Vue用于表单值和数据的双向绑定基本使用<body> <div id="app">    <!
复制链接

扫一扫