1, the basic usage
Vue v-model provides instructions for two-way data binding earth elements in the form, for example when used on the input box, the contents of the input data will be mapped to the real-time binding. For example the following example:
<template>
<div id="app">
<input type="text" v-model="message" placeholder="输入">
<p>输入的内容是：{{ message }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: ''
}
}
};
</script>
While the input box, {{message}} rendered in real time, view the contents of:
For text field textarea usage is the same:
<template>
<div id="app">
<textarea v-model="text" placeholder="输入..."></textarea>
<p>输入的内容是：</p>
<p style="white-space: pre">{{ text }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: ''
}
}
};
</script>
2, radio buttons
(1) radio button when used alone, does not require v-model, used as a binding Boolean value v-bind, is true is selected, NO is not selected, for example:
<template>
<div id="app">
<input type="radio" :checked="picked">
<label>单选按钮</label>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
picked: true
}
}
};
</script>
(2) if it is used in combination to achieve the effects of selected mutually exclusive, v-model needs to be used with the value:
<template>
<div id="app">
<input type="radio" v-model="picked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="radio" v-model="picked" value="js" id="js">
<label for="js">JavaScript</label>
<br>
<input type="radio" v-model="picked" value="css" id="css">
<label for="js">CSS</label>
<br>
<p>选择的项是：{{ picked }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
picked: 'js'
}
}
};
</script>
3, checkboxes
(1) When used alone box, v-model is also used to bind a Boolean value:
<template>
<div id="app">
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">选择状态：{{ checked }}</label>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
checked: false
}
}
};
</script>
(2) a combination of check boxes, but also value together with v-model, a plurality of check boxes are bound to the same type of data array, the array in which the value of value, which will select one. This process is bidirectional, when selected, will automatically push the value of the value of this array, the following sample code:
<template>
<div id="app">
<input type="checkbox" v-model="checked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="checkbox" v-model="checked" value="js" id="js">
<label for="js">JavaScript</label>
<br>
<input type="checkbox" v-model="checked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>选择的项是：{{ checked }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
checked: ['html', 'css']
}
}
};
</script>
4, drop-down list box
(1) Radio mode:
<template>
<div id="app">
<select v-model="selected">
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>选择的项是：{{ selected }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: 'html'
}
}
};
</script>
<template>
<div id="app">
<select v-model="selected" multiple>
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>选择的项是：{{ selected }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: ['html', 'js']
}
}
};
</script>
<template>
<div id="app">
<select v-model="selected">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
<p>选择的项是：{{ selected }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: 'html',
options: [
{
text: 'HTML',
value: 'html'
},
{
text: 'JavaScript',
value: 'js'
},
{
text: 'CSS',
value: 'css'
}
]
}
}
};
</script>
5, the binding value
The above example values v-model is a static binding string, or Boolean values, but in business it is sometimes necessary to bind a dynamic data, this time can be achieved by v-bind.
(1) radio button:
<template>
<div id="app">
<input type="radio" v-model="picked" :value="value">
<label>单选按钮</label>
<p>{{ picked }}</p>
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
picked: false,
value: 123
}
}
};
</script>
When selected app.picked === app.value, the value is 123.
(2) check boxes:
<template>
<div id="app">
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
<label>复选狂</label>
<p>{{ toggle }}</p>
<p>{{ value1 }}</p>
<p>{{ value2 }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
toggle: false,
value1: 'a',
value2: 'b'
}
}
};
</script>
When checked, app.toggle === app.value1; when unchecked, app.toggle === app.value2.
6, v-model modifiers:
In the input box, v-model input in the default event synchronization block input data (except the case of Chinese input methods described prompt), using the modifier .lazy will change into a synchronized event, the following sample code:
<template>
<div id="app">
<input type="text" v-model.lazy="message">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: ''
}
}
};
</script>
At this time, message does not change in real time, but only out of focus or press Enter to update.
reference:
"Vue.js real"