Vue是一个MVVM框架,即数据双向绑定,视图和数据会根据对方的变化而变化,仅UI控件涉及双向绑定
双向数据绑定 v-model指令在表单 元素上创建双向数据绑定
v-model会忽略所有表单元素的value checked selected的初始值 总是将 vue 实例的数据作为数据来源 应通过 js 在组件的data选项中声明初始值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--View层 模板-->
<div id="app">
<!--跟随输入-->
请输入;<input type="text" v-model="message"> {{message}}
<br>
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
{{message}}
<br>
<!--多选-->
性别:<input type="radio" name="sex" value="男" v-bind:checked="checked"> 男
<input type="radio" name="sex" value="女"> 女
<br>
性别:<input type="radio" name="age" value="11" v-model="age"> 11
<input type="radio" name="age" value="22" v-model="age"> 22
<p>
当前选中:{{age}}
</p>
<!--下拉框-->
<select v-model="selected">
<option disabled>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>当前选项:{{selected}}</span>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
/*Model层 数据*/
data:{
message: "",
checked: true,
age: "",
selected: ""
}
});
</script>
</body>
</html>