目录
表单绑定
引入vue
<script src="../lib/vue.js"></script>记住用户名
设置表单
增加表单记住用户名内容，并绑定变量为布尔值。
示例如下：
<div id="box">
{
{
mytext}}
<textarea name="" v-model="mytext" cols="30" rows="10"></textarea>
<div>
<div>用户名：<input type="text" v-model="mytext"></div>
<input type="checkbox" v-model="isRemember"> 记住用户名
<button>登录</button>
</div>
</div>
<script>
let vm = new Vue({
el:'#box',
data:{
mytext: "",
isRemember: false
},
methods:{}
})
</script>
实现逻辑
在登录按钮上绑定登录事件，在登录事件中判断是否记住用户名，如果是则使用localStrorage存储到本地中。
示例如下：
<div>
<div>用户名：<input type="text" v-model="mytext"></div>
<input type="checkbox" v-model="isRemember"> 记住用户名
<button @click="handleLogin">登录</button>
</div>
</div>
<script>
let vm = new Vue({
el:'#box',
data:{
mytext: localStorage.getItem("username"),
isRemember: false
},
methods:{
handleLogin() {
if(this.isRemember) {
localStorage.setItem("username", this.mytext)
}
}
}
})
</script>多选框绑定
设置变量
设置一个数组格式的变量为多选框存储选项值。
示例如下：
data:{
mytext: localStorage.getItem("username"),
isRemember: false,
checkList: []
},增加多选
表单增加多选-选项及绑定变量。
示例如下：
<div>
<h2>注册页面-兴趣爱好</h2>
<input type="checkbox" v-model="checkList" value="篮球">篮球
<input type="checkbox" v-model="checkList" value="足球">足球
<input type="checkbox" v-model="checkList" value="乒乓球">乒乓球
</div>单选绑定
设置变量
设置一个字符串的变量存储单选-选值。
示例如下：
data:{
mytext: localStorage.getItem("username"),
isRemember: false,
checkList: [],
select: 'n'
},增加单选
在表单中增加单选内容及绑定变量。
示例如下：
<div>
<h2>性别</h2>
<input type="radio" v-model="select" value="n"> 男
<input type="radio" v-model="select" value="w"> 女
</div>效果：
