溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文主要講解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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
