本文主要讲解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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容