vue _v-model多种选择锦囊_v-model 多个类型-优快云博客

本文链接：https://blog.youkuaiyun.com/yezi__6/article/details/86573845

本文详细介绍了Vue.js中表单控件的使用方法，包括单个复选框、多选框、选择列表及v-model修饰符的运用。通过具体示例，展示了如何在Vue项目中有效管理和操作用户输入。

没有优美的页面，仅仅是实现功能而已。

最近在重新学习vue，也会写一些小demo，希望对同时新手的你有帮助！

1.单个复选框绑定布尔值

<div id="app">
    <input type="checkbox" id="checkbox" v-model="checked" value="html">
    <label for="checkbox">{{checked}}</label>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            checked:true
        }
    })
</script>

2.多选框

<div id="app">
    <input type="checkbox" id="html"  v-model="checked" value="html">
    <label for="html">html</label><br>
    <input type="checkbox" id="js" v-model="checked" value="js">
    <label for="js">js</label><br>
    <input type="checkbox" id="css" v-model="checked" value="css">
    <label for="css">css</label><br>
    <p>已选：{{checked}}</p>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
           checked:[],

        },
        methods:{
           }
    })
</script>

3.选择列表，单表控件，加了multiple就可以多选了

<div id="app">
    <select v-model="selected">&lt;!&ndash;在这里添加multiple就可以多选了&ndash;&gt;
        <option>html</option>
        <option>js</option>
        <option>css</option>
    </select>
    <p>已选：{{selected}}</p>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            selected:[],

        },
        methods:{
        }
    })
</script>

4.v-model后跟.lazy不实时更新

.number转换成Number型

.trim自动过滤首尾空格

<div id="app">
  <input type="text" v-model.lazy="meesage"><!--message并不实时改变，而是文本框失焦或回车键时才更
  新-->
    <p>{{meesage}}</p>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            meesage:'',

        },
        methods:{
        }
    })
</script>