vue---v-model的详细解答 - Go语言中文社区

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

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>

 

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/DreamchaserHe/p/11753560.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2019-11-17 12:41:15
  • 阅读 ( 923 )
  • 分类：前端

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！