Vue2 v-model 深入理解与使用-优快云博客

本文链接：https://blog.youkuaiyun.com/fyinthesky/article/details/87977055

本文详细介绍了Vue2中的v-model特性，包括其懒加载更新、自定义组件实现、复选框与单选按钮的绑定、多选下拉框以及动态选项绑定等用法，通过实例展示了v-model在不同场景下的应用。

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

<!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> x</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
.bg_color_odd{
background-color:#0fa367;
}
.bg_color_even{
background-color:#f1f309;
}
.demo-alert-box{
background-color:#ff9931;
}

.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .8s ease;
}
.slide-fade-leave-active {
transition: all 2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(20px);
opacity: 0;
}

///
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

/
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .50s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
opacity: 0;
}

.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}

</style>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

</head>
<body>
<h1>v-model</h1>

<hr>

   <div id="app">
       <input v-model.lazy="amessage" placeholder="please write...">ABC</input>
       {{amessage}}
       <button @click="doalert">cl</button>

       <my-checkbox v-model="foo"></my-checkbox>

<hr>

       <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" id="John" value="John" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
<label for="jack">Mike</label>

       <br>
       <input type="checkbox" id="a" value="c" v-model="hhhh">
       <label for="a">check or not</label>
<br>
<span>{{hhhh ? "yes" : "no"}} /// Checked names:{{checkedNames}}</span>
       <hr>
       <input type="radio" name="trueorfalse" value="1000" v-model="theradio">
       <label for="trueorfalse">1000</label>
       <input type="radio" name="trueorfalse" value="2000" v-model="theradio">
       <label for="trueorfalse">2000</label>
       {{theradio}}

       <hr>
       <select v-model="selected" >
       <option disable value="">--select--</option>

       <option>one</option>
       <option>two</option>
       </select>
       {{selected}}

       <select v-model="mus" multiple>
       <option disable value="">--select--</option>

       <option>one</option>
       <option>two</option>
       </select>
       {{mus}}

       <hr>

       <select v-model="vforvmodel" :id="vforvmodel">
       <option v-for="option in options" v-bind:value="option.value">
           {{ option.text }}
       </option>
       </select>
       <span>Selected: {{ vforvmodel }}</span>


</div>









<script type="text/javascript">


       Vue.component('my-checkbox', {
       template: `
           <input
                   type="checkbox"
                   @change="$emit('input', $event.target.checked)"
                   :checked="value"
                   />
       `,
       props: ['value']
       })

       new Vue({
       el: '#app',
       data: {
           amessage:'',
           foo:'!checked',
           checkedNames:[],
           hhhh:false,
           theradio:'',
           selected:'',
           mus:[],
           vforvmodel:'A',
           options: [
           { text: 'One', value: 'A' },
           { text: 'Two', value: 'B' },
           { text: 'Three', value: 'C' }
           ]
       },
       methods:{
           doalert:function(){
               alert(this.amessage);
           }
       },


       })



</script>
</body>
</html>

vue2 v-model