v-model及其修饰符的使用

v-model

  • 预期:随表单控件类型不同而不同
  • 限制: 在input textarea select中使用
  • 修饰符:.lazy .number .trim

基本使用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <input type="text" v-model="name">
    <pre>{
    {name}}pre>
div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
<script>
    let app=new Vue({
      
        el:'#app',
        data:{
      
            name:'wanghh',
        }
    })
script>
body>
html>

可以看出来当改变input值时,下面的值也随之改变,这就是双向绑定
v-model及其修饰符的使用_第1张图片

修饰符

.lazy惰性更新

把刚才的代码改成v-model.lazy=“name”

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

会发现改变输入框里的值时,下面的值不会实时更新,直至我输入完按回车键,或者鼠标点击其他地方input失去焦点时,值才改变。
简而言之就是,当输入框失去焦点后改变绑定的值。

.trim去除前后空格

改一行代码

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

效果图如下,虽然输入框中输入很多空格但得到的值空格被去除。
v-model及其修饰符的使用_第2张图片
再点击其他地方,使其失去焦点,输入框里的值变成去除空格后的值
v-model及其修饰符的使用_第3张图片

.number将输入的字符串转为数字

如果不用.number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="price">
    <pre>{
     {
     typeof price}}</pre>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    let app=new Vue({
     
        el:'#app',
        data:{
     
            name:'wanghh',
            price:'3333',
        },
    })
</script>
</body>
</html>

效果图如下
v-model及其修饰符的使用_第4张图片
当加上.number

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

改变输入框的值(输入数字),效果如下
v-model及其修饰符的使用_第5张图片

在其他元素上的使用

以下代码使用了Input里的radio,checkbox以及textarea和select

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <label><input v-model="sex" value="male" type="radio">
    </label>
    <label><input v-model="sex" value="female" type="radio">
    </label>
    <span>{
     {
     sex}}</span>
    <br />
    <br />
    <label>
        游泳
        <input v-model="hobby" value="swimming" type="checkbox">
    </label>
    <label>
        绘画
        <input v-model="hobby" value="painting" type="checkbox">
    </label>
    <span>{
     {
     hobby}}</span>
    <br />
    <br />
    <textarea v-model="article"></textarea>
    <br />
    <br />
    <div>你要去哪里</div>
    <select v-model="from">
        <option value="1">王家沟</option>
        <option value="2">知春路</option>
    </select>
    <span>{
     {
     from}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    let app=new Vue({
     
        el:'#app',
        data:{
     
            sex:'female',
            hobby:[],
            article:'djakshckjdsssssssssssssssssssssssssssssssssssssssssssssa',
            from:1,
        },
    })
</script>
</body>
</html>

得到的效果是

v-model及其修饰符的使用_第6张图片

你可能感兴趣的:(vue,vue)