欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

vue---v-model的详细解答

程序员文章站 2022-06-24 12:09:48
1、v-model：双向数据绑定的实现原理 等同于一个 v-bind 加 v-on 2、v-model 结合radio类型的使用 3、v-model结合checkbox的使用 1、单选框 2、多选框 4、v-model结合select的使用 1、单选框 2、多选框 5、值绑定 ：动态绑定Value的 ......

1、v-model：双向数据绑定的实现原理     等同于一个  v-bind  加   v-on

<div id="app">
    <!-- <input type="text" v-model="message">  -->
    <input type="text" :value="message" @input="message=$event.target.value">
    <h2>{{message}}</h2>
</div>

 2、v-model 结合radio类型的使用

    <label for="man">
        <input type="radio" id="man" value="男" v-model="sex">
    </label>
    <label for="wman">
        <input type="radio" id="wman" value="女" v-model="sex">
    </label>
    <h2>你选择的性别是：{{sex}}</h2>

 3、v-model结合checkbox的使用

1、单选框

    <!-- checkbox 单选框 -->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="ischange">同意协议
    </label>
    <h2>你选择的是:{{ischange}}</h2>
    <button :disabled="!ischange">下一步</button><br><br><br>

2、多选框

    <!-- checkbox 多选框 -->
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <input type="checkbox" value="兵乓球" v-model="hobbies">兵乓球
    <input type="checkbox" value="排球" v-model="hobbies">排球
    <h2>你的爱好是：{{hobbies}}</h2>

4、v-model结合select的使用

1、单选框

    <!-- select  单选 -->
    <select name="" id="" v-model="fruit">
        <option value="西瓜">西瓜</option>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
    </select>
    <h2>你选择的水果是：{{fruit}}</h2><br><br>

2、多选框

    <!-- select  多选 -->
    <select name="" id="" v-model="fruits" multiple>
        <option value="西瓜">西瓜</option>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
    </select>
    <h2>你选择的水果是:{{fruits}}</h2>

 5、值绑定 ：动态绑定value的值

    <!-- 值绑定 -->
    <label :for="item" v-for="item in fruithobbies">
        <input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
    </label>

6、v-model修饰符的使用

1、lazy   作用：当文本框失去焦点或按  enter  的时候，v-model 才会执行变量的更新

    <!-- 1、lazy修饰符 -->
    <label for="active">
        <input type="text" id="active" v-model.lazy="message">
    </label>
    <h2>{{message}}</h2>

2、number 作用：把数据类型转换乘number类型

    <!-- 2、number修饰符 -->
    <!-- 当type的类型为number类型的时候，v-model绑定的值自动变成string类型 -->
    <input type="number" v-model.number="age">
    <h2>{{age}}---{{typeof(age)}}</h2>

3、、trim  作用：消除字符串连边的空格

    <!-- 3、trim 修饰符 -->
    <input type="text" v-model="trim">
    <h2>{{trim}}</h2>

*******完整代码*****

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <script src="./js/vue.js"></script>
</head>
<div id="app">
    <!-- <input type="text" v-model="message">  -->
    <input type="text" :value="message" @input="message=$event.target.value">
    <h2>{{message}}</h2><br>

    <label for="man">
        <input type="radio" id="man" value="男" v-model="sex">
    </label>
    <label for="wman">
        <input type="radio" id="wman" value="女" v-model="sex">
    </label>
    <h2>你选择的性别是：{{sex}}</h2><br>

    <!-- checkbox 单选框 -->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="ischange">同意协议
    </label>
    <h2>你选择的是:{{ischange}}</h2>
    <button :disabled="!ischange">下一步</button><br><br><br>

    <!-- checkbox 多选框 -->
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <input type="checkbox" value="兵乓球" v-model="hobbies">兵乓球
    <input type="checkbox" value="排球" v-model="hobbies">排球
    <h2>你的爱好是：{{hobbies}}</h2><br><br><br>

    <!-- select  单选 -->
    <select name="" id="" v-model="fruit">
        <option value="西瓜">西瓜</option>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
    </select>
    <h2>你选择的水果是：{{fruit}}</h2><br><br>
    <!-- select  多选 -->
    <select name="" id="" v-model="fruits" multiple>
        <option value="西瓜">西瓜</option>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
    </select>
    <h2>你选择的水果是:{{fruits}}</h2><br><br>

    <!-- 值绑定 -->
    <label :for="item" v-for="item in fruithobbies">
        <input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
    </label><br><br>

    <!-- v-model  修饰符 的使用 -->
    <!-- 1、lazy修饰符 -->
    <label for="active">
        <input type="text" id="active" v-model.lazy="message">
    </label>
    <h2>{{message}}</h2><br>

    <!-- 2、number修饰符 -->
    <!-- 当type的类型为number类型的时候，v-model绑定的值自动变成string类型 -->
    <input type="number" v-model.number="age">
    <h2>{{age}}---{{typeof(age)}}</h2><br>

    <!-- 3、trim 修饰符 -->
    <input type="text" v-model="trim">
    <h2>{{trim}}</h2>
</div>

<body>
    <script>
        let vm = new vue({
            el: '#app',
            data: () => ({
                message: 'v-model实现原理',
                sex: '男',
                age:0,
                ischange: true,
                hobbies: [],
                fruit: '香蕉',
                fruits: [],
                fruithobbies: ['西瓜', '草莓', '香蕉', '苹果', '哈密瓜'],
                trim:'           去除字符串两边的空格,控制台才能看出来      '
            }),
            methods: {}
        })
    </script>
</body>

</html>

 

上一篇： Go语言导出内容到Excel的方法

下一篇： vue-组件化开发基础

推荐阅读