文章目录
6、表单控件绑定/双向数据绑定
表单绑定（v-model）
input text
<body>
<div id="box">
<input type="text" v-model="mytext"/>
{
{mytext}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
mytext:'11111'
}
})
</script>
</body>
实现效果：
textarea文本框
<body>
<div id="box">
{
{mytext}}
<textarea type="text" v-model="mytext"></textarea>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
mytext:'11111',
}
})
</script>
</body>
实现效果：
checkbox多选框
<body>
<div id="box">
记住用户名：<input type="checkbox" v-model="isChecked"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
isChecked:false,
}
})
</script>
</body>
实现效果：
可以根据一个状态来判断是否选择。
双向数据绑定(v-model)
Checkbox 双向绑定
<body>
<div id="box">
<!-- 双向绑定-----1、绑定的是一个数组-----2、每一个checkbox控件都有一个value值-->
<input type="checkbox" v-model="checkedgroup" value="vue" >vue
<input type="checkbox" v-model="checkedgroup" value="react">react
<input type="checkbox" v-model="checkedgroup" value="jquery">jquery
{
{checkedgroup}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
checkedgroup:[],//用来记录用户选择了什么，并可提交给后端------双向绑定
}
})
</script>
</body>
radio单选框双向绑定
<body>
<div id="box">
<!---------radio单选框-------------->
<br>
<!--name 保证在一个段内，可以进行单选的--------value给每个控件添加value值-->
<input type="radio" v-model="picked" name="favor" value="vue">vue
<input type="radio" v-model="picked" name="favor" value="react">react
<input type="radio" v-model="picked" name="favor" value="jquery">jquery
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
picked:''
}
})
</script>
</body>
购物车
<style>
ul li{
list-style: none;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for="data in datalist" :key="data.id">
<input type="checkbox" v-model="checkgroup" :value="data" @change="handleItemChange"/>
{
{data}}
<br>
<button @click="data.number++">add</button>
<button @click="handleDel(data)">del</button>
<br>
<!-----用来控制输入想要购买的数量 ------>
<span>购买的商品数量：<input type="number" v-model="data.number"/></span>
</li>
</ul>
全选/全不选：<input type="checkbox" @change="handleChange" v-model="isAllChecked"/>
<!-- {
{checkgroup}}-->
<p>总金额计算：{
{getSum()}} （元）</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
checkgroup:[],
isAllChecked:false,
datalist:[
{
name:'商品1',
price:10,
number:1,
id:'1',
},
{
name:'商品2',
price:20,
number: 2,
id: '2',
},
{
name:'商品3',
price:30,
number: 3,
id: '3',
}
]
},
methods:{
//函数表达式----进行购物车勾选的数据累加
getSum(){
var sum = 0;
for (var i in this.checkgroup){
sum += this.checkgroup[i].number * this.checkgroup[i].price;
}
return sum;
},
//全选/全不选的触发
handleChange(){
// console.log('handleChange',this.isAllChecked)
//如果为true则全选，否则全不选
if (this.isAllChecked){
this.checkgroup = this.datalist;
}else{
this.checkgroup = [];
}
},
//每个小单元的触发
handleItemChange(){
//只有全选的时候isAllChecked才为true，其余的时候为false
if (this.checkgroup.length===this.datalist.length){
this.isAllChecked = true;
}else{
this.isAllChecked = false;
}
},
//减少或删除商品数量-------购物车内该条数量最少为1----
handleDel(data){
data.number --;
if (data.number <= 0){
data.number=1;
}
},
}
})
</script>
</body>
实现效果：
修饰符
- .lazy 失去焦点同步一次
- 不适用于模糊查询，因为模糊查询需要实时更新
<body>
<div id="box">
<input type="text" v-model.lazy="name"/>
{
{name}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
name:"zwj",
age:18,
mytext:'漂亮'
}
})
</script>
</body>
- .number 格式化数字
<input type="number" v-model.number="age"/>
{
{age}}
只能输入数字
- .trim 去除首尾空格
<input type="text" v-model="mytext">
{
{mytext}}
Vue组件
见《Vue组件学习笔记(一)之axios与fetch实现数据请求、计算属性》