vue 表单绑定

最新推荐文章于 2022-12-22 16:33:43 发布

v折耳

最新推荐文章于 2022-12-22 16:33:43 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue 表单绑定

本文链接：https://blog.csdn.net/wngzhem/article/details/53321361

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

vue的表单使用v-model来绑定数据，具有双向绑定数据的效果

 <div id="app">
        <input type="text" v-model="num" />
        <div>{{num}}</div>
    </div>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                num:1,
            }
        })
        app.num='I can change'
    </script>

双向绑定，及不仅可以通过js操作数据显示，并且可以通过input 等输入框改变data 。

checkbox 的数据绑定通过data 的ture or false 来确定是否是选定项、

 <div id="app">
        
        <input type="checkbox" name="box1" v-model="checks[0]" />选项1
        <input type="checkbox" name="box2" v-model="checks[1]" />选项2
        <input type="checkbox" name="box3" v-model="checks[2]" />选项3
        <input type="checkbox" name="box4" v-model="checks[3]" />选项4
        <input type="checkbox" name="box5" v-model="checks[4]" />选项5

    </div>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                num:1,
                checks:[0,1,true,false,'we',]
            }
        })
        app.num='I can change'
    </script>

测试得到，checkbox能够识别 [1/0][true/false]

对于字符串不识别，但是空默认为不选中

vue js 默认的选种值为[true/false]

上面为checkbox 没有value 的情况下，正常情况下需要有input的value值，通过v-bind:true-value和 v-bind:false-value

来对应选中的值和非选中的值

这时候v-model 给的参数如果等于v-bind:true-value 的值就为默认选中状态，true/1..都将无效不能实现选中效果

<body>
     <div id="app">
        <input type="checkbox"  v-bind:true-value="a" v-bind:false-value="b" name="box1" v-model="checks[0]" />选项1
        <input type="checkbox" v-bind:true-value="a" v-bind:false-value="b" name="box2" v-model="checks[1]" />选项2
        <input type="checkbox" v-bind:true-value="a" v-bind:false-value="b" name="box3" v-model="checks[2]" />选项3
    </div>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                a:'aaaa',
                b:'bbbb',
                checks:['aaaa',1,true]
            }
        })
    </script>

radio 也需要使用v-model的同时用value 来给input赋值；

需要默认选择项的话直接给 checks 赋值对应的value值。

<div id="app">

        <input type="radio" name="box1" value="box1" v-model="checks" />
        <input type="radio" name="box1" value="box2" v-model="checks" />
        <input type="radio" name="box1" value="box3" v-model="checks" />
        <input type="radio" name="box1" value="box4" v-model="checks" />
        <div>{{checks}}</div>
</div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                checks:''
            }
        })
        
    </script>

Select 的使用如下

   <div id="app">


        <select name="sel" id="sel" v-model="sel">
            <option v-for="(item,index) in opt " v-bind:value="item">{{index}}</option>
        </select>
    </div>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                opt:['a','b','c','d','e'],
                sel:'b'
            }
        })
    </script>

对select 初始使用 v-model 当sel 的值与option的值匹配时，select 的默认值就是匹配值

选择option后sel相应的更换