如何理解Vue的v-model指令的使用方法
时间：2021-06-15 09:16:46|栏目：vue|点击： 次
本文主要讲解v-model指令，主要包括HTML元素的v-model和组件上的v-model两种，用四个简单的案例介绍v-model的使用。
案例一：HTML元素的v-model -输入框(text)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app4">
{{price}}<br>
<input v-model="price"><!-- 下行注释的语法糖 -->
<!-- <input :value="price" @input="price = $event.target.value"> -->
</div>
<script>
new Vue({
el: '#app4',
data: {
price: '20'
}
});
</script>
</body>
</html>
案例二： 定制组件的v-model - 输入框(text)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app3">
{{price}}
<my-input v-model="price"></my-input><!-- 下行注释的语法糖 -->
<!-- <my-input :value="price" @input="val => {price = val}"></my-input> -->
</div>
<script>
Vue.component('my-input', {
template: '<div></span><input type="text" ref="input" :value="value" @input="doThis"/></div>',
props: {
value: String
},
methods: {
doThis() {
this.$emit('input', this.$refs.input.value);
}
}
});
new Vue({
el: '#app3',
data: {
price: '10'
}
});
</script>
</body>
</html>
案例三： 定制组件的v-model - 复选框(checkbox) - 2.2.0 新增
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app2">
{{fruit}}<!-- 观测数据变化 -->
<my-checkbox v-model="fruit.apple" value="apple"></my-checkbox><!-- 下行注释的语法糖 -->
<!-- <my-checkbox :checked="fruit.apple" @change="val => {fruit.apple = val}" value="apple"></my-checkbox> -->
<my-checkbox v-model="fruit.peach" value="peach"></my-checkbox><!-- 下行注释的语法糖 -->
<!-- <my-checkbox :checked="fruit.peach" @change="val => {fruit.peach = val}" value="peach"></my-checkbox> -->
</div>
<script>
Vue.component('my-checkbox', {
template: '<div><span>{{value}}</span><input type="checkbox" :checked="checked" @change="doThis" :value="value"/></div>',
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
value: String
},
methods: {
doThis() {
this.$emit('change', !this.checked);
}
}
});
new Vue({
el: '#app2',
data: {
fruit: {//数据
apple: true,
peach: false
}
}
});
</script>
</body>
</html>
案例四： 定制组件的v-model - 单选按钮(radio) -2.2.0 新增
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model指令</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app">
{{fruit}}<!-- 观测数据变化 -->
<my-radio v-model="fruit" value="apple" name="myFruit"></my-radio><!-- 下行注释的语法糖 -->
<!-- <my-radio :checked="fruit" @change="val => {fruit = val}" value="apple"></my-radio> -->
<my-radio v-model="fruit" value="peach" name="myFruit"></my-radio><!-- 下行注释的语法糖 -->
<!-- <my-radio :checked="fruit" @change="val => {fruit = val}" value="peach"></my-radio> -->
</div>
<script>
Vue.component('my-radio', {
template: '<div><span>{{value}}</span><input :name="name" type="radio" ref="radio" :checked="checked===value" @change="doThis" :value="value"/></div>',
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: String,
value: String,
name: String
},
methods: {
doThis() {
this.$emit('change', this.$refs.radio.value);
}
}
});
new Vue({
el: '#app',
data: {
fruit: 'peach'//数据
}
});
</script>
</body>
</html>
上一篇：有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
栏 目：vue
下一篇：基于vue2.0的活动倒计时组件countdown(附源码下载)
本文地址：http://www.codeinn.net/misctech/142503.html
