微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

Vue中v-model的使用

发布时间:2021-02-23 来源:未知 点击:

一,v-model是什么?

<body>
<div id="app">
    <input type="text" v-model="msg">
    <h2>{{msg}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'hello',
        }
    })
</script>
</body>

结果:

 
 
 
 
输入了 world

 

二,作用

Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入,然后更新数据。

  1. 因为input中的v-model绑定了msg,所以会实时将输入的内容传递给msg , msg发生改变。
  2. 当msg发生改变时,因为上面使用了插值语法将msg的值插入到DOM中,所以DOM会发生响应的改变。所以通过v-model实现了双向的绑定。

三,原理

v-model本质上是个语法糖,其实现原理包含两个步骤

  1. 通过v-bind绑定一个value属性
  2. 通过v-on指令给当前元素绑定input事件
<input type="text" :value="msg" v-on:input="msg=$event.target.value">

v-on:input="" 用于动态监听用户输入的信息,在界面上产生一个事件后,浏览器会生成一个event对象,这个event对象就包含了输入的信息

四,类型

除了上面的文本类型,v-model还能结合其他类型使用

1. v-model:radio

<div id="app">
    <!--当v-model绑定的是同一个变量,可以不加name属性来实现radio的互斥-->
    <label for="right">
        <input type="radio" id="right" name="judge" value="对" v-model="judge">对
    </label>
    <label for="wrong">
        <input type="radio" id="wrong" name="judge" value="错" v-model="judge">错
    </label>
    <h2>你的判断是:{{judge}}</h2>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            judge:'对'  //目的:选择之后将值绑定到judge中
        }
    })
</script>

结果:

 

2. v-model:checkbox

单个复选框
<div id="app">
    <label for="ok">
        <input type="checkbox" id="ok" v-model="isOk">可以
    </label>
    <h4>{{isOk}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            isOk:false
        }
    })
</script>

结果:

多个复选框
<div id="app">
    <input type="checkbox" value="香蕉" v-model="fruits">香蕉
    <input type="checkbox" value="苹果" v-model="fruits">苹果
    <input type="checkbox" value="梨子" v-model="fruits">梨子
    <h4>爱吃的水果是:{{fruits}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            fruits:[]
        }
    })
</script>

结果:

 

3. v-model:select

<div id="app">
    <select name="" id="" v-model="type">
        <option value="电影">电影</option>
        <option value="动漫">动漫</option>
        <option value="电视剧">电视剧</option>
    </select>
    <h4>喜欢的视频类型是:{{type}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            type:'动漫'
        }
    })
</script>

结果:

 

五,修饰符

1. lazy

v-model在默认情况下同步了输入框的数据,就是说输入框数据一有改变,对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点之后才更新

<input type="text" v-model.lazy="msg">

2.number

默认情况下,输入框得到的数据最后都会变成字符串形式。number修饰符可以将输入框得到的内容转为数字类型。

<input type="text" v-model.number="msg">

3.trim

trim修饰符可以去掉从输入框获取的内容的左右两边的空格

<input type="text" v-model.trim="msg">


这就是微学网-程序员之家为你提供的"Vue中v-model的使用"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/14084.html

上一篇:没有了

下一篇:vue和vue.js是一样的吗?

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟教程,提供各类程序编程入门,技巧