v-model use
Note that it will automatically confirm the value for you! ! ! No need to care about the process, just throw the json data into data and it will be selected automatically.
1. Simple demo
Realize that while typing in the input box, while displaying the content of the input box
2. The binding of the three boxes
<!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>
