v-model

最新推荐文章于 2024-04-18 16:58:47 发布

weixin_33819479

最新推荐文章于 2024-04-18 16:58:47 发布

阅读量59

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b399e986fb9a00e952cf2d6

版权

用于表单解构所显示的值只依赖所绑定的数据不在关心初始化插入的值(插入的值会被绑定的值覆盖)

v-model 在文本框的用法

vue中必须定义了 value

<body>
    <div id="demo">
        <input type="text" v-model="value">  'value在data中必须有定义'
        {{value}}
    </div>
</body>
<script>
    var app = new Vue({
        el:'#demo',
        data:{
            value:''
        }
    })
</script>
复制代码

页面输出结果

在多行文本框中的使用

同样所显示的值只依赖所绑定的数据不在关心初始化插入的值(插入的值会被绑定的值覆盖)

输出结果：

多个单选框

        <input type="radio" v-model:checked="star" name="1" value="HB">黄渤
        <input type="radio" v-model:checked="star" name="1" value="ZYX">张艺兴
        <input type="radio" v-model:checked="star" name="1" value="SHL">孙红雷
        现在选中的是： {{star}}  'star 就是 选中的 value的值'  
    </div>
</body>
<script>
    var app = new Vue({
        el:'#demo',
        data:{
           onceraido:false,
           star:'HB' '绑定的是input 的Value的值'
        }
    })
</script>
复制代码

输出结果

单个单选框 + 单个复选框

单个单选用v-bind
单个复选可以用 v-bind 或v-model

多个复选框

        多个复选框：
        红色：<input type="checkbox" v-model:check="checksArr" value="hs">
        绿色：<input type="checkbox" v-model:check="checksArr" value="ls">
        黄色：<input type="checkbox" v-model:check="checksArr" value="yellow">
        '下边三个是绑定的字符串'
        白色：<input type="checkbox" v-model:check="checks" value="bs">
        蓝色：<input type="checkbox" v-model:check="checks" value="blue">
        紫色：<input type="checkbox" v-model:check="checks" value="zs">
        {{checksArr}}
        {{checks}}
    </div>
</body>
<script>
    var app = new Vue({
        el:'#demo',
        data:{
            checksArr:[],
            checks:'',
            onceraido:false,
            star:'HB'
        }
    })
复制代码

输出结果

单选下拉框

        单选下拉框：</br>
        <select name="" id="" v-model="selected">
            <option value="风扇" >风扇</option>
            <option value="空调">空调</option>
            <option value="空气净化器">空气净化器</option>
            <option value="扇子">扇子</option>
        </select>
        {{selected}}
    </div>
</body>
<script>
    var app = new Vue({
        el:'#demo',
        data:{
            selected:''  '也可以写 selected:[] 但是返回的都是字符串  因为这是单选下拉框'
        }
    })
复制代码

多选下拉框

   <select name="select"  v-model="selectedList" multiple>
            <option value="风扇" selected>风扇</option>
            <option value="空调">空调</option>
            <option value="空气净化器">空气净化器</option>
            <option value="扇子">扇子</option>
        </select>
        {{selectedList}}

    </div>
</body>
<script>
    var app = new Vue({
        el:'#demo',
        data:{
            selectedList:[]  '绑定的是数组'
            })
复制代码

转载于:https://juejin.im/post/5b399e986fb9a00e952cf2d6

weixin_33819479

关注

0
点赞
踩
0

收藏

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

用于表单解构所显示的值只依赖所绑定的数据不在关心初始化插入的值(插入的值会被绑定的值覆盖)v-model 在文本框的用法vue中必须定义了 value<body> <div id="demo"> <input type="text" v-model="value"> 'value在data中必须有定义' ...
复制链接

扫一扫