第6课：表单与v-model
2018-09-05 本文已影响0人
我七
1.HTML中的输入框--v-model,请写出demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<p>下方input标签输入什么p标签显示什么</p>
<input type="text" v-model="text"><br>
<p>{{text}}</p>
<hr>
<p>多文本框</p>
<textarea name="" id="" cols="30" rows="10"v-model="text2">我是多行文本框初始化值</textarea>
<p>{{text2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#wrap',
data:{
text:'',
text2:''
}
})
</script>
</body>
</html>
2.HTML中的复选框--v-model,请写出demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<p>复选框</p>
单个复选框v-bind：<input type="checkbox" :checked="onerRadio"><br>
单个复选框v-model：<input type="checkbox" v-model="onerRadio"><br>
<p>多个复选框</p>
猫：<input type="checkbox" value="猫" v-model="checkname2"><br>
狗：<input type="checkbox" value="狗" v-model="checkname2"><br>
鸡：<input type="checkbox" value="鸡" v-model="checkname2"><br>
<p>现在选中的是： {{checkname2}}</p>
<hr>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#wrap',
data:{
onerRadio: true,//false选不中,true默认选中
checkname: '猫',//初始值不填就没有默认的选中，你想让其选中一个就填他的value值
checkname2: [],//''//这么写''你点击后是true和false，如果写成数组就可以显示//而且这个数组会存储你所有的value
}
})
</script>
</body>
</html>
3.HTML中的单选框--v-model,请写出demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="wrap">
猫：<input type="radio" name="checks" value="猫" v-model="checkname"><br>
狗：<input type="radio" name="checks" value="狗" v-model="checkname"><br>
鸡：<input type="radio" name="checks" value="鸡" v-model="checkname"><br>
<p>现在选中的是： {{checkname}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#wrap',
data:{
checkname: '猫'//初始值不填就没有默认的选中，你想让其选中一个就填他的value值
}
})
</script>
</body>
</html>
4.简述v-model的作用
在表单类元素上双向绑定事件
