vue使用_vue 性格选择-优快云博客

本文链接：https://blog.youkuaiyun.com/ab_15/article/details/125247074

本文详细介绍了Vue.js中v-model指令的使用，包括如何通过v-model实现单选按钮、复选框和下拉框的双向数据绑定。示例代码演示了如何设置默认选中状态，以及v-model.number、v-model.trim和v-model.lazy等修饰符的用法。同时，还展示了如何注册和使用自定义指令v-focus，以实现元素聚焦功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过v-model实现单选按钮

  <input type="radio" id="male" value="1" v-model='gender'>
   <label for="male">男</label>

   <input type="radio" id="female" value="2" v-model='gender'>
   <label for="female">女</label>


 new Vue({
         data: {
             // 默认会让当前的 value 值为 2 的单选框选中
                gender: 2,  
            },
    })

让复选框默认选中

 爱好  <input type="checkbox"  value="1" v-model="hobby">
            <input type="checkbox"  value="2" v-model="hobby">
            <input type="checkbox"  value="3" v-model="hobby">

new Vue({
        el:'#app',
       
        data:{
            hobby:["1"],
}
})

下拉框选中文本的值若想多选则给 select标签添加multiple属性在js中可用数组

    <div id="app">
    <span>职业</span>
    <select v-model="occupations">
        <option value="0" >请选择职业</option>
        <option value="1" >教师</option>
        <option value="2">软件工程师</option>
        <option value="3">律师</option>
    </select>
    <textarea v-model="desc" cols="30" rows="10"></textarea>
</div>

 new Vue({
        el:'#app',
        data:{
            occupations:'0' ,
            desc:'你好'  
        }
    })

v-model.number将字符串数字转换为数字

v-model.trim 过滤收尾的空白

v-model.lazy将input事件转换为 change事件

自定义指令

<input type="text" v-focus>

// 注册全局自定义指令
    Vue.directive('focus',{
        // inserted函数表示绑定了该指令的元素被插入到dom中会自动触发
        inserted:function(el){
            //给元素绑定聚焦
            el.focus()
        }
    })

  new Vue({
        el:'#app',
        // 注册局部指令
        directives:{
            focus:{
                inserted:function(el){
                    el.focus()
                }
            }
        }

    })