菜鸟Vue学习笔记（三）
本周使用了Vue来操作表单，接下来说下Vue中双向绑定表单元素的用法。
Vue中双向绑定是使用的v-model，所谓的双向绑定即改变变量的值，表单元素的值也会改变，同样的，改变表单元素的值变量的值也会改变。例如：
<body>
<div id="content">
<form action="" method="post">
<input type="text" name="username" v-model="username" placeholder="用户名"/>
</form>
用户信息为:{{username}}
</div>
</body>
<script>
var v = new Vue({
el: "#content",
data: {
username : "guest"
}
});
</script>
是不是非常简单？常用的文本框，密码框等用法都基本相识，包括下拉框也是如此，但是单选按钮和复选框则有些不一样，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="content">
<form action="" method="post">
<li><input type="text" name="username" v-model="username" placeholder="用户名"/></li>
<li><input type="password" name="password" v-model="password" placeholder="密码"/></li>
<li>
所在城市：<select name="city" v-model="city">
<option value="武汉">武汉</option>
<option value="长沙">长沙</option>
</select>
</li>
<li>
性别：<input type="radio" name="sex" value="男" v-model="sex"/>男
<input type="radio" name="sex" value="女" v-model="sex"/>女
</li>
<li>
爱好：<input type="checkbox" name="hobby" value="唱歌" v-model="hobby"/>唱歌
<input type="checkbox" name="hobby" value="跳舞" v-model="hobby"/>跳舞
<input type="checkbox" name="hobby" value="画画" v-model="hobby"/>画画
</li>
</form>
<li>用户名：{{username}}</li>
<li>密码：{{password}}</li>
<li>城市：{{city}}</li>
<li>性别：{{sex}}</li>
<li>爱好:{{hobby}}</li>
</div>
</body>
</html>
<script>
var v = new Vue({
el: "#content",
data: {
username : "guest",
password: "12345",
city: "长沙",
sex: "女",
hobby: ["唱歌", "跳舞"]
}
});
</script>
运行后结果如下：
好了，今天的双向绑定就学到这了，下次我们讲讲组件如何使用。
网友评论