09-v-model

李先生 2020年12月19日 121次浏览

v-model

基本使用

<!DOCTYPE html>

<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></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               message:"你好"
           },
           methods:{}
        });
    </script>
</body>

</html>

原理

<!DOCTYPE html>

<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></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message">
        <br>
        <input type="text" :value="message" @input="valueChange">
        <br>
        <input type="text" :value="message" @input="message = $event.target.value">
        
        <br>
        {{message}}
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               message:"你好"
           },
           methods:{
               valueChange(event){
                this.message = event.target.value;
               }
           }
        });
    </script>
</body>

</html>

v-model与radio的结合使用

<!DOCTYPE html>

<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></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <label for="male">
            <input type="radio" id="male" value="男" v-model="sex">男
        </label>
        <label for="female">
            <input type="radio" id="female" value="女" v-model="sex">女
        </label>
        <h2>你选择的性别是:{{sex}}</h2>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               sex:'男'
           },
           methods:{}
        });
    </script>
</body>

</html>

v-model与checkbox的结合使用

<!DOCTYPE html>

<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></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- checkbox单选框 -->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <h2>您选择的是:{{isAgree}}</h2>
        <button :disabled="!isAgree">下一步</button>
        <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">羽毛球
        <h2>{{hobbies}}</h2>

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

    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               isAgree:false,
               hobbies:[],
               originHobbies:['篮球','足球','乒乓球','羽毛球'],
           },
           methods:{}
        });
    </script>
</body>

</html>

v-model与select

<!DOCTYPE html>

<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></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 1、选择一个 -->
        <select name="abc" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="菠萝">菠萝</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>{{fruit}}</h2>
        <br>

        <!-- 2. 选择多个 -->
        <select name="abc" v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="菠萝">菠萝</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>{{fruits}}</h2>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               fruit:"香蕉",
               fruits:[],
           },
           methods:{}
        });
    </script>
</body>

</html>

v-model修饰符

  • lazy 当用户按下会车或者组件失去焦点的时候在触发数据绑定
  • number 按照数字类型绑定数据
  • trim 去除前后空格
<!DOCTYPE html>

<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></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 1. lazy -->
        <input type="text" v-model="message">
        <h2>{{message}}</h2>

        <input type="text" v-model.lazy="message">
        <h2>{{message}}</h2>

        <!-- 2. number -->
        <input type="number" v-model="age">
        <h2>{{age}}{{typeof(age)}}</h2>
        <input type="number" v-model.number="age">
        <h2>{{age}}{{typeof(age)}}</h2>

        <!-- 3.trim  去除前后空格-->
        <input type="text" v-model="name">
        <h2>开始{{name}}结束</h2>
        <input type="text" v-model.trim="name">
        <h2>开始{{name}}结束</h2>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               message:"你好",
               age:18,
               name:"   乐乐   "
           },
           methods:{}
        });
    </script>
</body>

</html>