news 2026/4/3 4:15:41

2.Vue.day2

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
2.Vue.day2

一.指令补充

  1. 指令修饰符

  2. v-bind对于style操作的增强

  3. v-model应用于其他表单元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> textarea { display: block; width: 240px; height: 100px; margin: 10px 0; } </style> </head> <body> <div id="app"> <h3>小黑学习网</h3> 姓名： <input type="text" v-model="username"> <br><br> 是否单身： <input type="checkbox" v-model="isSingle"> <br><br> <!-- 前置理解： 1. name: 给单选框加上 name属性可以分组→同一组互相会互斥 2.value：给单选框加上value属性，用于提交给后台的数据 结合Vue使用→v-model --> 性别: <input v-model="gender" type="radio" name="gender" value="male">男 <input v-model="gender" type="radio" name="gender" value="female">女 <br><br> <!-- 前置理解： 1.option需要设置value值，提交给后台 2.select的value值，关联了选中的option 的 value 值 结合Vue使用→v-model --> 所在城市: <select v-model="cityId"> <option value="101">北京</option> <option value="102">上海</option> <option value="103">成都</option> <option value="104">南京</option> </select> <br><br> 自我描述： <textarea v-model="desc"></textarea> <button>立即注册</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { username:'', isSingle:false, gender:'female', cityId:'102', desc:"" } }) </script> </body> </html>

二.computed计算属性

  1. 基础语法

  2. 计算属性vs方法

  3. 完整写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 姓：<input type="text" v-model="firstName"><br> 名：<input type="text" v-model="lastName"><br> <p>姓名：{{fullName}}</p> <button @click="changeName">修改姓名</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { firstName:'刘', lastName:'备' }, methods: { changeName(){ this.fullName='吕小布' } }, computed: { //简写->获取 没有配置设置的逻辑 // fullName(){ // return this.firstName+this.lastName // } //完整写法-》获取+设置 fullName:{ //（1）当fullName计算属性 被获取求值时 执行get（有缓存） //会将返回值作为，求值的结果 get(){ return this.firstName+this.lastName }, //（2）当fullName计算属性 被修改赋值时 执行set //修改的值 传递给set的形参 set(value){ // console.log(value) // console.log(value.slice(0,1)); // console.log(value.slice(1)); this.firstName=value.slice(0,1) this.lastName=value.slice(1) } } } }) </script> </body> </html>

三.watch侦听器

  1. 基础语法

  2. 完整写法

四.综合案例：水果购物车

渲染/删除/修改数量/全选反选/统计总价/持久化

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./css/inputnumber.css" /> <link rel="stylesheet" href="./css/index.css" /> <title>购物车</title> </head> <body> <div class="app-container" id="app"> <!-- 顶部banner --> <div class="banner-box"><img src="http://autumnfish.cn/static/fruit.jpg" alt="" /></div> <!-- 面包屑 --> <div class="breadcrumb"> <span>🏠</span> / <span>购物车</span> </div> <!-- 购物车主体 --> <div class="main" v-if="fruitList.length>0"> <div class="table"> <!-- 头部 --> <div class="thead"> <div class="tr"> <div class="th">选中</div> <div class="th th-pic">图片</div> <div class="th">单价</div> <div class="th num-th">个数</div> <div class="th">小计</div> <div class="th">操作</div> </div> </div> <!-- 身体 --> <div class="tbody"> <div v-for="(item,index) in fruitList" :key="item.id" class="tr" :class="{active:item.isChecked}"> <div class="td"><input type="checkbox" v-model="item.isChecked"/></div> <div class="td"><img :src="item.icon" alt="" /></div> <div class="td">{{item.price}}</div> <div class="td"> <div class="my-input-number"> <button :disabled="item.num<=1" class="decrease" @click="sub(item.id)"> - </button> <span class="my-input__inner">{{item.num}}</span> <button class="increase" @click="add(item.id)"> + </button> </div> </div> <div class="td">{{item.num*item.price}}</div> <div class="td"><button @click="del(item.id)">删除</button></div> </div> </div> </div> </div> <!-- 底部 --> <div class="bottom"> <!-- 全选 --> <label class="check-all"> <input type="checkbox" v-model="isAll"/> 全选 </label> <div class="right-box"> <!-- 所有商品总价 --> <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{totalPrice}}</span></span> <!-- 结算按钮 --> <button class="pay">结算( {{totalCount}} )</button> </div> </div> </div> <!-- 空车 --> <div class="empty" v-else>🛒空空如也</div> </div> <script src="../vue.js"></script> <script> const defaultArr= [ { id: 1, icon: 'http://autumnfish.cn/static/火龙果.png', isChecked: true, num: 2, price: 6, }, { id: 2, icon: 'http://autumnfish.cn/static/荔枝.png', isChecked: false, num: 7, price: 20, }, { id: 3, icon: 'http://autumnfish.cn/static/榴莲.png', isChecked: false, num: 3, price: 40, }, { id: 4, icon: 'http://autumnfish.cn/static/鸭梨.png', isChecked: true, num: 10, price: 3, }, { id: 5, icon: 'http://autumnfish.cn/static/樱桃.png', isChecked: false, num: 20, price: 34, }, ], const app = new Vue({ el: '#app', data: { // 水果列表 fruitList:JSON.parse(localStorage.getItem('list'))||defaultArr }, computed:{ //默认计算属性，只能获取不能设置，要设置完整写法 // isAll(){ // //必须所有的小选框都选中 全选按钮才选中-> every // return this.fruitList.every(item=>item.isChecked) // } //完整写法 isAll:{ get(){ return this.fruitList.every(item=>item.isChecked) }, set(value){ // console.log(value); //基于拿到的布尔值 要让所有的小选框 同步状态 this.fruitList.forEach(item=>item.isChecked=value) } }, //统计选中的总数 reduce totalCount(){ return this.fruitList.reduce((sum,item)=>{ if(item.isChecked){ //选中->需要累加 return sum+item.num }else{ //没选中 return sum } },0) }, totalPrice(){ return this.fruitList.reduce((sum,item)=>{ if(item.isChecked){ return sum+(item.num*item.price) } else{ return sum } },0) } }, methods:{ del(id){ this.fruitList=this.fruitList.filter(item=>item.id!=id) }, add(id){ //1.根据id找到数组里的对应项->find const fruit=this.fruitList.find(item=>item.id===id) //2.操作num数量 fruit.num++ }, sub(id){ const fruit=this.fruitList.find(item=>item.id===id) //2.操作num数量 fruit.num-- } }, watch:{ fruitList:{ deep:true, handler(newValue){ //需要将变化后的newValue存入本地 localStorage.setItem('list',JSON.stringify(newValue)) } } } }) </script> </body> </html>
版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/3/31 6:04:16

【毕业设计】SpringBoot+Vue+MySQL 网上服装商城平台源码+数据库+论文+部署文档

摘要 随着互联网技术的快速发展和电子商务的普及&#xff0c;线上购物已成为人们日常生活中不可或缺的一部分。服装作为高频消费品类&#xff0c;其线上交易规模逐年增长&#xff0c;消费者对购物平台的用户体验、功能完善性和安全性提出了更高要求。传统服装零售模式受限于时…

作者头像 李华
网站建设 2026/4/1 3:06:33

3步解锁智能配置效率工具：零代码实现黑苹果系统快速部署

3步解锁智能配置效率工具&#xff1a;零代码实现黑苹果系统快速部署 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 你是否经历过花费3小时手动配置仍…

作者头像 李华
网站建设 2026/3/31 5:01:34

EFI魔术师：黑苹果OpenCore配置的自动化解决方案

EFI魔术师&#xff1a;黑苹果OpenCore配置的自动化解决方案 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 问题引入&#xff1a;黑苹果配置的技术门槛…

作者头像 李华
网站建设 2026/3/26 6:15:46

【递归算法】计算布尔二叉树的值

题目链接&#xff1a;计算布尔二叉树的值 一、题目解析 通过示例1我们可以知道大概怎么算了&#xff1a; 先找到最后一层的叶子节点&#xff0c;通过两个叶子节点的双亲结点的值来运算得出布尔值&#xff0c;逐层往上。 二、算法原理 很容易可以想到递归算法&#xff0c;从宏…

作者头像 李华