初识Vue.js(六)

Vue.js 同时被 2 个专栏收录
9 篇文章 0 订阅

6.1 表单控件的基本用法
表达控件在业务中较为常见,比如多选,下拉选择,输入框等,用它们可以完成数据的录入、校验、提交等。Vue.js提供了V-model指令,用于在表单元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。


<body>
<div id='app'>
  <input type="=text"  v-model="name" placeholder="请输入">
  <h1> 你好,{{name}}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>
  var app=new  Vue({
    el:'#app',
    data:{
      name:''

    }

  })
</script>
</body>

使用v-model之后,表单控件显示的值只能依赖所绑定的数据,不再关心初始化的value属性,对于在<textarea></textarea>之间插入的值,也不会生效。
使用V-model时,如果是用中文输入法输入中文,一般在没有选定词组之前,也就是拼音阶段,Vue是不会更新数据的,当敲下汉字的时候才会触发更新。如果希望总是实时更新,可以用@input来代替V-model,事实上,V-model也是一个特殊的语法糖,只不过他会在不同的表单上智能处理。

<body>
<div id='app'>
  <input type="=text"  @input="handleInput" placeholder="请输入">
  <h1> 你好,{{name}}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>
  var app=new  Vue({
    el:'#app',
    data:{
      name:''

    },methods:{
      handleInput:function (e) {
        this.name=e.target.value;

      }
    }

  })
</script>

单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为真时选中,为否时不选。
如果是组合实现互斥的效果,就需要v-model配合value来使用。

  <body>
       <div id="app">  
  <input type="radio" v-model="gender" value="man" >
 <!--  value值很重要,当按钮被选中时,该值将发送给服务器;-->  
  <label for="man"></label>
    <input type="radio" v-model="gender" value="woman" >
      <label for="woman"></label>
    <p>已选:{{gender}}</p><!--如果用原生js实现此功能比较麻烦-->  
</div>  
<script>  
    var app=new Vue({  
        el:'#app',  
        data:{  
            gender:''  
        }  
    });  
</script>  

    </body>

复选框
复选框也分为单独使用和组合使用,不过用法稍与单选不同。复选框单独使用时,也是v-model来绑定一个值。

  <body>
       <div id="app">  
  <input type="checkbox" v-model="checked" id="checked" >
  <label for="man"></label>
  <br />

    <p>已选:{{checked}}</p><!--如果用原生js实现此功能比较麻烦-->  
</div>  
<script>  
    var app=new Vue({
        el:'#app',
        data:{
            checked:false
        }

    });
</script>  

    </body>

组合使用的时候,v-model与value一起,多个勾选框都绑定到同一个数组类型的数据,value的值在数组中,就会选中这一项。这一过程中也是双向的,在勾选时,value的值也会自动push到这个数组中。

    <body>
       <div id="app">  
  <input type="checkbox" v-model="checked" value="html" id="html" >
  <label for="html">HTML</label>
  <br />
  <input type="checkbox" v-model="checked" value="js" id="js" >
  <label for="js">JavaScript</label>
  <br />
  <input type="checkbox" v-model="checked" value="css" id="css" >
  <label for="css">CSS</label>
    <p>已选:{{checked}}</p><!--如果用原生js实现此功能比较麻烦-->  
</div>  
<script>  
    var app=new Vue({
        el:'#app',
        data:{
            checked:['html','css']
        }

    });
</script>  

    </body>

选择列表
选择列表就是下拉选择器,也是常见的表单空间,同样也分为单选和多选两种方式,先看一下单选的示例代码:

<body>
       <div id="app">  
<select v-model="selected">
    <option>html</option>
    <option value="js">JavaScript</option>
    <option>css</option>
</select>
<p>选择的项是:{{selected}}</p>
<!--<option>是备选项,如果含有value属性,v-model就会优先匹配value的值:如果没有,就会直接匹配<option>的text-->
</div>  
<script>  
    var app=new Vue({
        el:'#app',
        data:{
            selected:'html'
        }

    });
</script>  

    </body>

给<selectd>添加属性multiple就可以多选了,此时v-model绑定的是一个数组,与复选用法类似,示例代码如下

<body>
       <div id="app">  
<select v-model="selected" multiple>
    <option>html</option>
    <option value="js">JavaScript</option>
    <option>css</option>
</select>
<p>选择的项是:{{selected}}</p>
</div>  
<script>  
    var app=new Vue({
        el:'#app',
        data:{
            selected:['html','js']
        }

    });
</script>  

    </body>

·在业务中,<option>经常用v-for动态输出,value和text也是用v-bind来动态输出的,例如:

 <body>
       <div id="app">  
<select v-model="selected" >
    <option
        v-for="option in options"
        :value="option.value">
    {{option.text}} </option>

</select>
<p>选择的项是:{{selected}}</p>
</div>  
<script>  
    var app=new Vue({
        el:'#app',
        data:{
            selected:'html',
            options:[
            {
                text:'HTML',
                value:'html'        
            },{
                text:'JavaScript',
                value:'js'      
            },
            {
                text:'CSS',
                value:'css'     
            }

            ]
        }
    });

虽然用选择列表空间可以很简单地完成下拉选择的需求,但是在实际业务中反而不常用,因为它的样式依赖平台和浏览器,无法统一,也不太美观,功能也受限,比如不支持搜素,所以常见的解决方案是用div模拟一个类似的组件。
绑定值
之前我们介绍的单选按钮,复选框和选择列表在单独使用或单选的情况下,v-model绑定的值是一个静态的字符串或布尔值,但在业务中,有时需要绑定一个动态的数据,这时可以用v-bind来实现。
选择列表的动态绑定

 <body>
          <script src="https://unpkg.com/vue/dist/vue.js"></script>   
        <div id="app">
            <select v-model="selected">
                <option :value="{number:123}">123</option>


            </select>
            {{selected.number}}
        </div> 
 <script>
 var app=new Vue({
    el:"#app",
    data:{

        selected:''
    }


 })

 </script>      

    </body>

当选中的时候,app.selected是一个Object,所以app.selectde.number===123.
修饰符
在输入框,v-model默认在input时间中同步输入框的数据,使用修饰符.lazy会转变为在change时间中同步,实例代码如下:

<body>
          <script src="https://unpkg.com/vue/dist/vue.js"></script>   
        <div id="app">
            <input type="text"  v-model.lazy="message"/>
            <p>
                {{message}}
            </p>
        </div> 
 <script>
 var app=new Vue({
    el:"#app",
    data:{

        message:''
    }


 })

 </script>      

    </body>

这个时候,message并不是实时改变的,而是在失去焦点或者按回车时才更新。
.trim修饰符可以自动过滤输入的首尾空格,示例代码如下:

 <body>
          <script src="https://unpkg.com/vue/dist/vue.js"></script>   
        <div id="app">
            <input type="text"  v-model.trim="message"/>
            <p>
                {{message}}
            </p>
        </div> 
 <script>
 var app=new Vue({
    el:"#app",
    data:{

        message:''
    }


 })

 </script>      

    </body>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值