袁磊老师的课，VUE（三）
2024-04-07 20:34:00
- 今天来做两个联系，来领悟一下vue的主要思想
第一个练习，自己拿去玩
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>购物车</title>
</head><style>ul {list-style: none;}#app li {height: 30px;margin: 10px;padding: 10px;border: 1px solid #ccc;}#app span {width: 120px;background-color: peachpuff;margin-left: 10px;display: inline-block;line-height: 26px;text-align: center;font-size: 14px;}#app span:nth-child(4) {margin-right: 200px;}
</style><body><div id="app"><h2>购物车</h2><ul><template v-for="(v,i) in goods"><!-- v就是item， i就是序号 --><li><span>{{v.name}}</span><span>{{v.price}}</span><span>{{v.count}}</span><span>{{v.desc}}</span><button @click="add(i)">增加</button><button @click="minus(v)" :disabled="v.count==0">减少</button><!-- disable就是让这个控件不能用 --><!-- 冒号disabled就是绑定了一个什么东西 disabled就是当商品数量count等于0了之后，这个button不能操作了--><button @click="del(i)">删除</button></li></template></ul><!-- 求总和的第一种方法 --><h2>总价格：{{total()}}</h2><!-- 求总和的第二种方法 计算属性 属性！不加括号！ 属性！ 不加括号！--><h2>总价格：{{all}}</h2></div><script src="vue.js"></script><script>var vm = new Vue({el: "#app",data: {goods: [{name: "apple",price: 5.5,count: 2,desc: "苹果"},{name: "peach",price: 25.5,count: 5,desc: "桃子"},{name: "banana",price: 8.5,count: 21,desc: "香蕉"}, {name: "pear",price: 3.5,count: 10,desc: "梨"}]},methods: {add: function (index) {this.goods[index].count++;},minus: function (item) {item.count--;},del: function (index) {this.goods.splice(index, 1);// 用splice这个方法，从参数index的位置开始删除，每次删除一个},total: function () {let sum = 0;for (let i = 0; i < this.goods.length; i++) {sum += this.goods[i].price * this.goods[i].count;// 这里是数组的循环，记得把goods后面跟上下标，这样好确定是goods里的哪一行}return sum;}},// 计算属性，不是必要的// 刷新的不是很勤快，上面的methods中total方法每次都会刷新computed: {// all是一个属性，用的时候，可以想上面的data里goods一样使用all: function () {let sum = 0;for (let i = 0; i < this.goods.length; i++) {sum += this.goods[i].price * this.goods[i].count;//这里是数组的循环，记得把goods后面跟上下标，这样好确定是goods里的哪一行 }return sum;}}})</script>
</body></html>
第二个练习
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>todo---list</title>
</head>
<style>.box {width: 800px;height: 50px;padding: 10px;margin: 10px;border: 1px solid #ccc;}.box span {display: inline-block;width: 180px;background-color: peachpuff;text-align: center;line-height: 26px;}.box button {display: none;float: right;}.box :hover button {display: inline-block;}.name {width: 150px;display: none;}.cur .name {display: inline-block}.cur span {display: none;}.cur {border-color: bisque;}
</style><body><div id="app"><h2>todolist</h2><div id="form"><input v-model="input"><button @click="add">增加</button></div><div v-for="(v,i) in List" class="box" :class="{cur:index==i}"><!-- 用:class来进行绑定 false表示没有这个类，true表示有这个类 --><input type="checkbox" v-model="v.done"><span @dblclick="update(i)">{{v.name}}</span><!-- 下面这句话是重点！！！！！！！！！！！！！！！！！ --><input v-model="v.name" class="name" @keyup.enter="save(i)" @blur="save(i)" @keyup.esc="undo(i)"><!-- 最后一个undo要按下esc键子！！！才可以用！！！ --><button @click="del">删除</button></div></div><script src="vue.js"></script><script>var vm = new Vue({el: "#app",data: {List: [{name: "理发",done: false,}, {name: "学习vue",done: false,}, {name: "学习python",done: false,}, {name: "学习node",done: false,}, ],index: -1,input: "",before: ""},methods: {add: function () {// 对于add就是在数组里加一个元素// 在外面，写变量可以不用写this，在方法里面写一定要写thisif (this.input == "") {return;// 如果输入为空，我们不处理}let item = {name: this.input,done: false}this.List.push(item);this.intput = "";// 加好之后记得清空输入框},del: function () {this.List.splice(index, 1)},update: function (i) {console.log(i);this.index = i;this.before = this.List[i].name;},save: function (i) {this.index = -1;},undo: function (i) {this.List[i].name = this.before;this.before = "";this.index = -1;}},computed: {}})</script>
</body></html>
这里按下esc键可以退出！！！！
好啦，今天的代码就到这里啦！
袁磊老师的课，VUE（三）相关推荐
- 袁磊老师的课，ES6（四）
一.set 类似于数组,但是成员的值都是唯一的,没有重复的值 const s = new Set(); [2,3,5,4,5,2,2].forEach(x=>s.add(x)); //第二个5. ...
- 在“双减”政策下，利用《陈老师排课12.0》排主课、早自习、课后服务三种不同时段的综合课表
陈老师排课12.0是排课11.0的升级版.可以对不同时段分别排课,最后把几张课表综合在一起.排课12.0把VB程序与EXCEL课表打印系统完美结合,先对全校原始课表进行课时智能分布优化,按<排课 ...
- 中职计算机说课稿三篇,精选中职计算机说课稿三篇-20210609060707.docx-原创力文档...
PAGE / NUMPAGES 精选中职计算机说课稿三篇 中职计算机说课稿(一) 位评委老师你们好!我是来自 XXX职业中专计算机专业的老师 XXX,今日我说课的题目是?<电子表格基本操作> ...
- 【机器学习-学习笔记】吴恩达老师机器学习课的笔记（黄海广博士）
吴恩达老师机器学习课的笔记github地址:https://github.com/fengdu78/Coursera-ML-AndrewNg-Notes,黄海广博士原创,黄海广博士也是这门课的最初翻译 ...
- 有关三年级计算机课的日记,有趣的一节课日记 三年级日记
第1篇:有趣的一节课日记 三年级日记 今天上午,我在快乐作文上了一节感恩父母的课. 老师给我们发了一些五*缤纷的毛根,让我们做手工.我想给爸爸做一幅眼镜,给妈妈做一朵五光十*的花,你们猜为什么我给爸爸 ...
- 陈老师排课软件12A（正式版）
陈老师排课软件12A版是12.0的加强版,输入人事安排表更加简单方便,适合于小学.初中.普高.职高.大中专院校的教务排课. 一．新课表排课流程 1．将<原始分布>中的各科目与对应的任课教 ...
- 小学生计算机课的演讲稿,小学生课前三分钟演讲稿范文5篇
课前小演讲的活动,是一个正能量的传播平台,也是一个互相了解的好方式.我会一直继续下去的,并在此过程中不断的完善.下面给大家分享一些关于小学生课前三分钟演讲稿范文5篇,供大家参考. 小学生课前三分钟演讲 ...
- 小学信息技术用计算机画画说课,小学信息技术说课稿三篇
[导语]信息技术课也就是我们常说的电脑课,无忧考网准备了以下内容,供大家参考! 篇一 我是7号选手XXX,今天我说课的题目是<剪贴图形>. 一.教材分析:<剪贴图形>是江苏省小 ...
- 新高考全走班（4选2、6选3、7选3）陈老师排课原理及方案
全走班排课流程: 1.收集选课信息及统计选课人数. 2.确定走班班级个数及走班班级上课顺序. 3.自动走班班级分班. 4.配备走班班级教室与走班班级的任课教师. 5.自动生成每位学生的走班班级.走班教 ...
最新文章
- Sql Server2005一則怪現象
- 重温SQL——行转列，列转行
- .NET 请求、事件 处理流程
- JQuery的 serializeObject 序列化form表单
- 如何激活Office 2016(ProPlus/Visio2016/Project2016) VOL 简体中文版下载地址和安装方法哦
- 计算机导论大一第四章,计算机导论-第四章.ppt
- Django对接微信公众号以实现消息自动回复
- C#钉钉官方工作流和自定义工作流代码实现
- 安卓系统怎么连接服务器数据库,安卓服务器连接数据库的方法
- HIVE 实现均匀抽样
- 人工智能守护青山绿水 内蒙古环保厅引入阿里云ET环境大脑
- 软件项目技术路线图_创建基本的项目路线图
- 计算机组成原理多级先行进位,计算机组成原理—最系统的算机基础知识.ppt
- kermit使用注意事项
- 网站带不带www真的不一样，很多新手不知道区别会被坑死的
- 西安互联网公司防坑指南
- ftp下载文件失败问题记录
- 近级压降和电弧产生原因
- 美设计出激光动力太空电梯 成功爬升900米
- FPGA-4人表决器
热门文章
- 图钉能按到墙上吗_请问图钉能钉在水泥墙上吗
- 未来的经济——从共享充电宝来看
- jquey javascript 绑定点击事件(click事件无反应，因js获取不到当前的点击项)
- CKEditor 4使用方法，来自http://docs.ckeditor.com/#!/guide/dev_ckeditor_js_load官网地址
- WebMatrix进阶教程(1)：如何安装和使用微软全新开发工具WebMatrix
- OpenCV + CPP 系列（卌一）图像特征匹配（ FLANN 匹配）
- MySQL可重复读级别会不会造成幻读
- 契约锁解读四川、山东新规，推动采购合同电子化
- 计算机报录比多少算高,考研报录比10:1高么？考研报录比多少算是成功率比较大的？...
- 安装 VMware workstation