小小千想和您聊一聊

当前位置: 首页> 技术分享> 菜鸟Vue学习笔记(三)

菜鸟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>


运行后结果如下:

好了,今天的双向绑定就学到这了,下次我们讲讲组件如何使用。

上一篇:HTML5工具初识之网页编辑器

下一篇:菜鸟Vue学习笔记(四)

QQ技术交流群

千锋HTML5官方①群
791201477

加入群聊