2021-07-14 按键修饰符 表单控制 购物车案例 v-model进阶

最新推荐文章于 2024-08-15 01:55:01 发布
最新推荐文章于 2024-08-15 01:55:01 发布
阅读量53 收藏
点赞数
分类专栏： vue 文章标签： vue python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56274379/article/details/118730159
版权
本文详细介绍了Vue中的基本操作，如按键修饰符应用、表单控制（包括checkbox、radio和多选框）、购物车案例（全选/全不选、数量加减），以及v-model的高级用法。此外，深入剖析了Vue组件的生命周期钩子，涵盖了从创建到销毁的全过程。
摘要由CSDN通过智能技术生成

1 按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按键修饰符</title>
    <script src="./js/vue.js"></script>
</head>

<body>


<div id="app">

    <input type="text" v-model="name" @keyup="handelKey1">
    <input type="text" v-model="name" @keyup.enter="handelKey2">
    <!--    <button @click="handelClick">点我</button>-->

</div>


</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: ''
        },
        methods: {
            handelKey1(ev) {
                console.log(ev)
                if (ev.keyCode == 13) {
                    console.log('按下了回车')
                }
            },
            handelKey2() {
                console.log('回车键按下了')
            },
            handelClick(ev) {
                console.log(ev)
            }
        }

    })
</script>

</html>

2 表单控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控制</title>
    <script src="./js/vue.js"></script>
</head>

<body>


<div id="app">

    <h1>checkbox的选中与不选中</h1>
    <p>用户名： <input type="text" v-model="name"></p>
    <p>密码： <input type="password" v-model="password"></p>
    <p><input type="checkbox" v-model="isRem">记住密码</p>
    <button @click="submit">登录</button>
    <hr>
    <h1>性别单选：radio</h1>

    <input type="radio" v-model="gender" value="1">男
    <input type="radio" v-model="gender" value="2">女
    <input type="radio" v-model="gender" value="3">其他
    <br>
    您选择的性别是：{{gender}}
    <hr>
    <h1>爱好多选：checkbox</h1>

    <input type="checkbox" v-model="hobby" value="1">篮球
    <br>
    <input type="checkbox" v-model="hobby" value="2">足球
    <br>
    <input type="checkbox" v-model="hobby" value="3">美女
    <br>
    您的爱好是：{{hobby}}

</div>


</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
            isRem: false,
            gender: '',
            hobby:[],
        },
        methods: {
            submit() {
                console.log(this.name)
                console.log(this.password)
                console.log(this.isRem)
            }
        }

    })
</script>

</html>

3 购物车案例

3.1 简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车简单案例</title>
    <script src="./js/vue.js"></script>
</head>
<style>
    table, th {
        border: 1px solid black;
        text-align: center;
    }
</style>
<body>


<div id="app">

    <table>
        <tr>
            <th>商品名</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>选择</th>
        </tr>
        <tr v-for="good in goods_list">
            <th>{{good.name}}</th>

            <th>{{good.price}}</th>
            <th>{{good.number}}</th>
            <th><input type="checkbox" v-model="checkGroup" :value="good"></th>
        </tr>
    </table>
    <hr>
<!--    您选中了：{{checkGroup}}-->
    <br>
    总价格是：{{getprice()}}

</div>


</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goods_list: [
                {name: '今瓶没', price: 99, number: 2},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 5},
            ],
            checkGroup: [],

        },
        methods: {
            getprice() {
                let total = 0
                // if (this.checkGroup.length > 0) {
                //     for(i=0;i<this.checkGroup.length;i++){
                //         total+=this.checkGroup[i].price*this.checkGroup[i].number
                //     }
                // }
                // if (this.checkGroup.length > 0) {
                //     for (value of this.checkGroup) {
                //         total += value.price * value.number
                //     }
                // }

                if (this.checkGroup.length > 0) {
                    for (i in this.checkGroup) {
                        total += this.checkGroup[i].price * this.checkGroup[i].number
                    }
                }

                return total

            }
        }

    })
</script>

</html>

3.2 加入全选全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车简单案例</title>
    <script src="./js/vue.js"></script>
</head>
<style>
    table, th {
        border: 1px solid black;
        text-align: center;
    }
</style>
<body>


<div id="app">

    <table>
        <tr>
            <th>商品名</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>选择(全选/全不选) <input type="checkbox" v-model="allChecked" @change="handleChange"></th>
        </tr>
        <tr v-for="good in goods_list">
            <th>{{good.name}}</th>

            <th>{{good.price}}</th>
            <th>{{good.number}}</th>
            <th><input type="checkbox" v-model="checkGroup" :value="good" @change="changeOne"></th>
        </tr>
    </table>
    <hr>
    <!--    您选中了：{{checkGroup}}-->
    <br>
    总价格是：{{getprice()}}

</div>


</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goods_list: [
                {name: '今瓶没', price: 99, number: 2},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 5},
            ],
            checkGroup: [],
            allChecked: false,

        },
        methods: {
            getprice() {
                let total = 0
                // if (this.checkGroup.length > 0) {
                //     for(i=0;i<this.checkGroup.length;i++){
                //         total+=this.checkGroup[i].price*this.checkGroup[i].number
                //     }
                // }
                // if (this.checkGroup.length > 0) {
                //     for (value of this.checkGroup) {
                //         total += value.price * value.number
                //     }
                // }

                if (this.checkGroup.length > 0) {
                    for (i in this.checkGroup) {
                        total += this.checkGroup[i].price * this.checkGroup[i].number
                    }
                }

                return total

            },
            handleChange() {
                //通过判断allChecked是true或者false，实现checkGroup全有值或空

                if (this.allChecked) {
                    this.checkGroup = this.goods_list
                } else {
                    this.checkGroup = []
                }
            },
            changeOne() {
                if (this.checkGroup.length == this.goods_list.length) {
                    this.allChecked = true
                } else {
                    this.allChecked = false
                }
            }
        }

    })
</script>

</html>

3.3 加入数量加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车简单案例</title>
    <script src="./js/vue.js"></script>
</head>
<style>
    table, th {
        border: 1px solid black;
        text-align: center;
    }
</style>
<body>


<div id="app">

    <table>
        <tr>
            <th>商品名</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>选择(全选/全不选) <input type="checkbox" v-model="allChecked" @change="handleChange"></th>
        </tr>
        <tr v-for="good in goods_list">
            <th>{{good.name}}</th>

            <th>{{good.price}}</th>
            <th><button @click="handle1(good)">-</button>{{good.number}}<button @click="good.number++">+</button></th>
            <th><input type="checkbox" v-model="checkGroup" :value="good" @change="changeOne"></th>
        </tr>
    </table>
    <hr>
    <!--    您选中了：{{checkGroup}}-->
    <br>
    总价格是：{{getprice()}}

</div>


</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goods_list: [
                {name: '今瓶没', price: 99, number: 2},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 5},
            ],
            checkGroup: [],
            allChecked: false,

        },
        methods: {
            getprice() {
                let total = 0
                // if (this.checkGroup.length > 0) {
                //     for(i=0;i<this.checkGroup.length;i++){
                //         total+=this.checkGroup[i].price*this.checkGroup[i].number
                //     }
                // }
                // if (this.checkGroup.length > 0) {
                //     for (value of this.checkGroup) {
                //         total += value.price * value.number
                //     }
                // }

                if (this.checkGroup.length > 0) {
                    for (i in this.checkGroup) {
                        total += this.checkGroup[i].price * this.checkGroup[i].number
                    }
                }

                return total

            },
            handleChange() {
                //通过判断allChecked是true或者false，实现checkGroup全有值或空

                if (this.allChecked) {
                    this.checkGroup = this.goods_list
                } else {
                    this.checkGroup = []
                }
            },
            changeOne() {
                if (this.checkGroup.length == this.goods_list.length) {
                    this.allChecked = true
                } else {
                    this.allChecked = false
                }
            },
            handle1(good){

                if(good.number>1){
                    good.number--
                }else {
                    good.number=1
                }

            }
        }

    })
</script>

</html>

4 v-model进阶

lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首和末尾的空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model进阶</title>
    <script src="./js/vue.js"></script>
</head>

<body>


<div id="app">

<!--    <input type="text" v-model.lazy="name"> 输入内容是：{{name}}-->
<!--    <input type="text" v-model.number="name"> 输入内容是：{{name}}-->
    <input type="text" v-model.trim="name"> 输入内容是：{{name}}

</div>


</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: ''

        },

    })
</script>

</html>

5 Vue生命周期钩子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model进阶</title>
    <script src="./js/vue.js"></script>
</head>

<body>


<div id="app">

<!--    <child v-if="isShow"></child>-->
</div>


</body>
<script>
    //定义一个组件
    Vue.component('child', {
        template: `
            <div>
                {{name}}
                <br>
                {{age}}
                <button @click="name='Darker1'">更新数据1</button>
                <button @click="name='Darker2'">更新数据2</button>
            </div>`,
        data() {
            return {
                name: 'Darker1',
                age: 19
            }
        },

        beforeCreate() {
            console.group('当前状态：beforeCreate')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        created() {
            console.group('当前状态：created')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        beforeMount() {
            console.group('当前状态：beforeMount')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        mounted() {
            console.group('当前状态：mounted')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
            //用的最多，向后端加载数据，创建定时器等
            console.log("页面已被vue实例渲染, data, methods已更新");
            console.log('mounted')
            this.t = setInterval(function () {
                console.log('daada')
            }, 3000)

            clearInterval(this.t)

        },
        beforeUpdate() {
            console.group('当前状态：beforeUpdate')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        updated() {
            console.group('当前状态：updated')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        beforeDestroy() {
            console.group('当前状态：beforeDestroy')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        destroyed() {
            console.group('当前状态：destroyed')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
            //组件销毁，清理定时器
            clearInterval(this.t)
            this.t = null
            console.log('destoryed')
        },


    })


    var vm = new Vue({
        el: '#app',
        data: {
            isShow: true

        },
        methods:{
            init(){
                console.log('init')
            },

        },
        mounted() {
            console.log('mounted执行；了')
            //ajax向后端获取数据
            this.init()

        },



    })
</script>

</html>
m0_56274379
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2（2）之watch 侦听器/computed 计算属性/指令修饰符 / v-bind对于样式操作的增强 / v-model应用于其他表单元素
qq_66318904的博客
04-27 1070
​ 所谓指令修饰符就是通过指明一些指令后缀 ，不同的后缀封装了不同的处理操作 —> 简化代码代码演示： 3.v-model修饰符 ——去除首位空格 -——转数字 4.事件修饰符 ——阻止冒泡 ——阻止默认行为 ——可以连用 即阻止事件冒泡也阻止默认行为 三、v-bind对样式控制的增强-操作class 为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。 2.对象语法 当class动态绑定的是对象时，键就是类
js实现购物车效果
拾灬Tao的博客
12-03 670
html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css.css"> <script src="js.js"></script> </head> <body&gt
微信小程序（购物车）--在wxml中设置保留小数位数
qsj0606的博客
01-04 860
微信小程序（购物车）–在wxml中设置保留小数位数 一、在该页面文件夹下新建一个wxs后缀的文件 var filters = { toFix: function (value) { return value.toFixed(2)//此处2为保留两位小数 } } module.exports = { toFix: filters.toFix } 二、在wxml文件中引入 <wxs module="filters" src="../number.wxs"></wxs&g
vue实现购物车
m0_46533814的博客
02-10 6264
vue实现购物车功能 根据增加商品数量、减少商品数量、移除商品动态更新总价格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="stylesheet" href="css/shop.css"> </head> <body> <div id
Vue之表单与v-model
peijiajing的博客
10-15 3373
Vue之表单与v-model小编分为五个部分：如下 （1）v-model基本用法 （2）单选框/按钮 （3）复选框/多选按钮 （4）下拉选择列表 （5）表单输入绑定修饰符 v-model基本用法 表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校0验、提交等。 Vue 提供了 v-model指令，用于在表单类元素上双向绑定数据。 例如在输入框上使用时，输...
Vue中v-model的使用及案例
月光晒了很凉快的博客
09-03 2167
v-model 是 Vue 提供的一个语法糖，它是 value 值和事件的结合体，它会根据不同的表单项，来选择执行不同的事件。它的作用是，通过和表单元素绑定，实现双向数据绑定，通过表单项可以更改数据。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源，应该在 data 选项中声明初始值。在没有使用v-model指令时，我们通过data数据控制表单项中的值，还是麻烦的，需要绑定属性和事件来完成。 使用 v-model 指令
VUE2 Day02指令修饰符 计算属性-watch侦听器水果购物车案例
weixin_52284271的博客
12-18 435
指令修饰符，计算属性，水果购物车案例
vue之day03：案件修饰符， check-box单选多选和radio,基本购物车功能，v-model进阶，Vue生命周期，Vue与后端交互
Yydsaoligei的博客
10-26 655
案件修饰符， check-box单选多选和radio,基本购物车功能，v-model进阶，Vue生命周期，Vue与后端交互
Vue笔记七——v-model表单输入绑定详细介绍
weixin_46351593的博客
01-03 1904
v-model的使用 你可以用 v-model 指令在表单 、 及 `` 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model的基本使用 表单控件在实际开发中时非常常见的。特别是对于用户信息的提交，需要大量的表单。 Vue中使用v-model指令来实现表单元素和数据的双向绑定。 案例解析： 当我们在输入框输入内容时 因为input中的
三个vue项目源码-九宫格抽奖-音乐播放器-购物车结算.zip
05-27
此外，表单验证也是必不可少的部分，Vue提供了多种验证方法，如v-model修饰符和自定义指令，可以轻松实现这些功能。 这些项目覆盖了Vue.js开发中的基础和高级技巧，包括组件设计、数据绑定、状态管理、事件处理和...
Vue快速入门（二）.doc
07-09
`v-model` 有一些修饰符，如 `lazy`（延迟更新，仅在失去焦点时更新）、`number`（确保输入为数字）和 `trim`（自动去除两端空格）。 ```html <input v-model.lazy="message" placeholder="按Enter键后输入才更新">...
（全）传智播客PHP就业班视频完整课程
10-30
9-5 3.php xml编程③-内部dtd 外边dtd dtd元素 dtd修饰符 9-5 4.php xml编程④-dtd属性 引用实体 参数实体 ide开发xml 9-5 5.php xml编程⑤-复杂的dtd综合练习 9-5 6.php xml编程⑥-dom基本概念 phpdom编程(1) 9-6 1...
史上最全韩顺平传智播客PHP就业班视频，10月份全集
03-26
9-5 3.php xml编程③-内部dtd 外边dtd dtd元素 dtd修饰符 9-5 4.php xml编程④-dtd属性 引用实体 参数实体 ide开发xml 9-5 5.php xml编程⑤-复杂的dtd综合练习 9-5 6.php xml编程⑥-dom基本概念 phpdom编程(1) 9-6 1...
史上最全韩顺平传智播客PHP就业班视频，9月份全集
03-26
9-5 3.php xml编程③-内部dtd 外边dtd dtd元素 dtd修饰符 9-5 4.php xml编程④-dtd属性 引用实体 参数实体 ide开发xml 9-5 5.php xml编程⑤-复杂的dtd综合练习 9-5 6.php xml编程⑥-dom基本概念 phpdom编程(1) 9-6 1...
【Python】入门到放弃之第九章《字典》
最新发布
MP13537560060的博客
08-15 618
这是本系列的第九章节内容，《字典》。在Python中，字典（Dictionary）是一种内置的数据结构，用于存储键值对（key-value pairs）。字典是可变的，意味着你可以在创建字典后添加、删除或修改其中的元素。字典的键（key）必须是唯一的，并且是不可变的（即，它们必须是不可变数据类型，如字符串、数字或元组，但不能是列表或字典等可变类型）。字典的值（value）则可以是任何数据类型，包括列表、元组、字典等。以上，就是Python中字典的全部内容。
【python学习】深入解析 `jq` 库：JSON 处理的利器
m0_54007171的博客
08-13 394
jq库是 Python 对流行的命令行工具jq的封装。它允许你直接在 Python 中使用jq的查询语言来处理 JSON 数据。借助jq，你可以轻松地对 JSON 数据进行过滤、选择、转换、聚合等操作，极大地简化了代码复杂度。
GraphRAG：复杂查询的知识图谱新框架
YeJuliaLi的博客
08-14 743
微软最近发布了名为 GraphRAG（Graphs + Retrieval Augmented Generation）的创新 RAG 框架，这是一个将文本提取、语义网络分析，与大语言模型（LLM）的提示和总结功能结合在一起的端到端系统，用于深入理解文本数据集。在对私有数据中的复杂文本信息进行文档分析时，GrahRAG 使用 LLM 生成的知识图谱来大幅提高问答性能。这里的私有数据集是指 LLM 没...
importlib库介绍
m0_51579041的博客
08-14 200
importlib
vue3 动态控制v-model修饰符
04-17
在Vue 3中，可以使用动态控制v-model修饰符来实现对v-model的修饰符进行动态切换。v-model修饰符是用于对输入框的值进行处理的一种方式。 在Vue 3中，可以通过使用计算属性和动态绑定来实现动态控制v-model修饰符。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值