uso del modelo v
Tenga en cuenta que confirmará automáticamente el valor por usted. ! ! No es necesario preocuparse por el proceso, simplemente arroje los datos json a los datos y se seleccionarán automáticamente.
1. Demostración simple
Tenga en cuenta que mientras escribe en el cuadro de entrada, mientras muestra el contenido del cuadro de entrada
2. La encuadernación de los tres recuadros
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 数据双向绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 中文文档地址 -->
</head>
<body>
<!-- 数据和model的双向绑定-- 表单输入绑定
https://cn.vuejs.org/v2/guide/forms.html
-->
<div id="app">
<h4>msg: {
{ message }}</h4>
<input type="text" v-model="message"/>
</div>
<!-- 单选框 -->
<div id="app1">
<h4>gender: {
{ gender }}</h4>
<input name ="gender" type="radio" value="男" v-model="gender"> 男
<input name ="gender" type="radio" value="女" v-model="gender"> 女
</div>
<!-- 多选框 -->
<div id="app2">
<h4>hobby: {
{ hobby }}</h4>
<input name="hobby" type="checkbox" value="1" v-model="hobby">篮球
<input name="hobby" type="checkbox" value="2" v-model="hobby">羽毛球
<input name="hobby" type="checkbox" value="3" v-model="hobby">pingPong球
<input name="hobby" type="checkbox" value="4" v-model="hobby">足球
</div>
<!-- 下拉框 -->
<div id="app3">
<h4>selected: {
{ selected }}</h4>
<select v-model="selected">
<option value="" disabled>=== 请选择 ====</option>
<option>java</option>
<option>python</option>
<option>go</option>
</select>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "hello, vue.js!"
}
});
new Vue({
el: "#app1",
data: {
gender: "女"
}
});
new Vue({
el: "#app2",
/* 多个复选框请使用数组 */
data: {
hobby: ["2", "3"]
}
});
/* 下拉框 绑定数据 */
new Vue({
el: "#app3",
data: {
selected: ""
// selected: "java" 会自动选中java这一项
}
});
</script>
</body>
</html>
