本文是Vue基础教程的第四部分，聚焦于表单控件绑定和购物车实现。通过模拟后端数据展示单选和多选商品，并实现选中商品金额自动计算。还探讨了如何利用表单修饰符优化双向绑定，如失去焦点时更新和输入验证，避免不必要的资源消耗。
1）
vue 表单控件绑定
v-model
再来一个最简单的内容
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="box">
<input type="text" v-model="myText" />
{{myText}}
</div>
<body></body>
<script>
var vm = new Vue({
el: "#box",
data: {
myText: "",
},
});
</script>
</html>
异常的舒适 ，可以实现 文本框和状态都变化 也可改变状态 来改变文本框
多行表单也是可以的
下一个问题 我想做一个checkbox 用来得到用户是否点击了 怎么操作？
现在我想用实现多个选择选一个怎么操作 ？
而且需要选择到之后 可以监控状态 vm.checkGroup这个数组也随之改变
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="box">
<p>
你的爱好是什么？
<!-- 必须加一个value 不然会变成全选和全不选 -->
<input type="checkbox" v-model="checkGroup" value="y" />游泳
<input type="checkbox" v-model="checkGroup" value="d" />读书
<input type="checkbox" v-model="checkGroup" value="p" />跑步
</p>
<!-- 加这个是为了方便展示在页面上 -->
{{checkGroup}}
</div>
</body>
<script>
var vm = new Vue({
el: "#box",
data: {
myText: "",
// 这个地方需要用一个数组装选中的东西
checkGroup: [],
},
});
</script>
</html>
实现 单选一个
2）
vue-购物车
我们先模拟后端数据 在页面显示效果
2)-1
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="box">
<ul>
<li v-for="data in datalist">
<input type="checkbox" v-model="checkGroup" :value="data" />
{{data}}
</li>
</ul>
{{checkGroup}}
<p>总金额计算为：</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#box",
data: {
checkGroup: [],
// 这里模拟的是后端传来的数据
datalist: [
{
name: "apple",
price: 5000,
number: 1,
id: "1",
},
{
name: "xiaomi",
price: 4000,
number: 1,
id: "2",
},
],
},
});
</script>
</html>
当前可以实现单选和多选 那么接下来怎么操作 ？
2）-2
勾选商品的金额计算？
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="box">
<ul>
<li v-for="data in datalist">
<input type="checkbox" v-model="checkGroup" :value="data" />
{{data}}
</li>
</ul>
{{checkGroup}}
<p>总金额计算为：{{getSum()}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#box",
data: {
checkGroup: [],
// 这里模拟的是后端传来的数据
datalist: [
{
name: "apple",
price: 5000,
number: 1,
id: "1",
},
{
name: "xiaomi",
price: 4000,
number: 2,
id: "2",
},
],
},
methods: {
// 这里写了一个方法 对于选上的对象 放到数组中 并且进行遍历
// 遍历之后 累和 返回
getSum() {
var sum = 0;
for (var i in this.checkGroup) {
sum += this.checkGroup[i].price * this.checkGroup[i].number;
}
return sum;
},
},
});
</script>
</html>
这样就实现了 选中后自动计算的功能呢
2）-3
我想实现在这些小选择
外面做一个按钮 如果选中 则里面的东西都选中 不勾选 则里面的内容 都不选中 怎么操作 ？？
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="box">
<input type="checkbox" @change="handleChange" v-model="isAllChecked" />
<ul>
<li v-for="data in datalist">
<input type="checkbox" v-model="checkGroup" :value="data" />
{{data}}
</li>
</ul>
{{checkGroup}}
<p>总金额计算为：{{getSum()}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#box",
data: {
checkGroup: [],
isAllChecked: false,
// 这里模拟的是后端传来的数据
datalist: [
{
name: "apple",
price: 5000,
number: 1,
id: "1",
},
{
name: "xiaomi",
price: 4000,
number: 2,
id: "2",
},
],
},
methods: {
// 这里写了一个方法 对于选上的对象 放到数组中 并且进行遍历
// 遍历之后 累和 返回
getSum() {
var sum = 0;
for (var i in this.checkGroup) {
sum += this.checkGroup[i].price * this.checkGroup[i].number;
}
return sum;
},
handleChange() {
if (this.isAllChecked) {
this.checkGroup = this.datalist;
} else {
this.checkGroup = [];
}
},
},
});
</script>
</html>
2) -4
很完美了吗 ？ 我确实可以点击这个checkbox 实现 全选或者全部选 但是如果下面的小的checkbox 取消勾选 上面那个大的没有影响
也就是说 如果下面2个全部勾选了 上面大的 需要选上
如果下面两个不是全选 则上面那个不选
效果很nice 不信你可以试试
2）-5
目测 很nice
不过 我想添加两个按钮 一个增加一个删除 使得我的number 改变 并且重新计算
怎么操作 ？
而且我对减到0的时候加了限制
需要写
1）两个按钮
2）按钮的控制 尤其是减法按钮的控制
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="box">
<input type="checkbox" @change="handleChange" v-model="isAllChecked" />
<ul>
<li v-for="data in datalist">
<input
type="checkbox"
v-model="checkGroup"
:value="data"
@change="handleLiChange"
/>
{{data}}
<button @click="handleDel(data)">del</button>
{{data.number}}
<button @click="data.number++">add</button>
</li>
</ul>
<p>总金额计算为：{{getSum()}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#box",
data: {
checkGroup: [],
isAllChecked: false,
// 这里模拟的是后端传来的数据
datalist: [
{
name: "apple",
price: 5000,
number: 1,
id: "1",
},
{
name: "xiaomi",
price: 4000,
number: 2,
id: "2",
},
],
},
methods: {
// 这里写了一个方法 对于选上的对象 放到数组中 并且进行遍历
// 遍历之后 累和 返回
getSum() {
var sum = 0;
for (var i in this.checkGroup) {
sum += this.checkGroup[i].price * this.checkGroup[i].number;
}
return sum;
},
handleChange() {
if (this.isAllChecked) {
this.checkGroup = this.datalist;
} else {
this.checkGroup = [];
}
},
// 这段代码实现的是 上面那个选中后下面两个跟着选中的效果
handleLiChange() {
if (this.checkGroup === this.datatList) {
this.isAllChecked = true;
} else {
this.isAllChecked = false;
}
},
// 这段代码是对按钮减号减到0 做一个限制 不能为负数
handleDel(data) {
var number = data.number--;
if (number === 0) {
data.number = 0;
}
},
},
});
</script>
</html>
3）表单修饰符
3）-1
v-model 双向绑定 太勤快了 只要我一改变 它就变 我有没有办法让他变懒惰一些，尝试节省浏览器资源呢 ？
于是有了v-model.lazy 失去焦点才变化
不演示了 自己敲一下 太简单了
3）-2
如果实际开发 我的输入框 是输入年龄的 我怎么做一个限制呢 ？
可以使用v-model.number 只要用户开始输入的是数字 则后续输入的字母或者其他不显示但 用户开始输入是字母 无法屏蔽 显得鸡肋
还不如在前面但类型限制为 type = "number"
3)-3
有一个潜在但隐患 不知道你有没有发现 ？
开发过程中 如果 我的文本框没有限制空格
用户开始注册时不小心输入了空格
这个空格 被传递到后端 数据库
下次用户登录时开始骂 登录不上
开发中通常采用 v-model.trim取首尾空格
扫一扫
1272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
