菜鸟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>
运行后结果如下:
![bca294ab5493680ada3137d9f27d8a71.png](https://i-blog.csdnimg.cn/blog_migrate/40fbec32df61f23f129ec5f525667829.jpeg)
好了,今天的双向绑定就学到这了,下次我们讲讲组件如何使用。