v-model：用于在==表单类元素==上双向绑定事件
可以应用于input 和textarea等
注意：所显示的值只依赖于绑定的数据，不在关心初始化插入的value
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
单选按钮：
1.单个单选按钮，直接用v-bind绑定一个布尔值，用v-model是不行的。
2.如果是组合使用，就需要用v-model来配合value使用，绑定选中单选框中的value值，此处所绑定的初始值可以随便给。
复选框：
1.单个复选框，直接用定一个布尔值，可以用v-model可以用v-bind
2.多个复选框，如果是组合使用，就需要v-model来配合value使用，v-model绑定一个数组—如果绑定的是字符串，则会转化为true。false，与所有绑定的复选框的
checked属性相对应
<!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>
网友评论