vue小案例

  1. 小黑记事本小案例
    <footer class="footer" ><span class="todo-count" v-if="list.length!=0"><strong>{{list.length}}</strong> items left</span><button class="clear-completed" @click="clear" v-if="list.length!=0">Clear</button></footer>
</section>
<!-- 底部 -->
<footer class="info"><p><a href="http://www.itheima.com/"><img src="../image/black.png" alt="" /></a></p>
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: "#todoapp",data: {list: ["写代码", "吃饭饭", "睡觉觉"],inputValue: "好好学习,天天向上"},methods: {add: function () {this.list.push(this.inputValue);},remove:function(index){console.log("删除");console.log(index);this.list.splice(index,1);},clear:function (){this.list = []}},})
</script>
</body>
</html>
  1. 购物车小案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue实现购物车案例</title>
</head>
<body>
<div id="app"><div v-if="items.length"><h1> {{msg}}  computed{{  counts }}</h1>编号: <input type="text" v-model="item.id">名称: <input type="text" v-model="item.name">单价: <input type="text" v-model="item.price">数量: <input type="text" v-model="item.count"><button @click="addCount"> 添加到购物车 </button><br><br><br><table border="1"><tr><th>编号</th><th>名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr><tr v-for="(item,index) in items" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><input type="button" value="-" @click="remove(index)"> {{item.count}} <input type="button" value="+" @click="add(index)"> </td><td>{{item.count * item.price}}</td><td><button @click="removeClick(index)">删除</button></td></tr></table><h3>总价格: {{ totalPrice }}</h3><h3>总价格: {{ totalPrice }}</h3><h3>总价格: {{ totalPrice }}</h3></div><h1 v-else>购物车为空</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el:'#app',data : {count:0,msg:'购物车案例',item : {},items:[{id:1,name:'iphone12',price:4899,count:1,delete:"删除"},{id:2,name:'redmik30pro',price:3199,count:1,delete: "删除"},]},methods: {add:function (idx){this.items[idx].count++},remove:function (idx){if (this.items[idx].count>1) {this.items[idx].count--} else {alert('购买的商品不能少于一件')}},// totalPrice:function (){//     var totalprice = 0//     for (var i=0 ; i<this.items.length ; i++){//         totalprice +=this.items[i].price *this.items[i].count//     }//     return totalprice// },addCount:function (){if (!this.item.id){alert('请输入编号');return false}if (!this.item.name){alert('请输入名称');return false}if (!this.item.price){alert('请输入价格');return false}if (!this.item.count){alert('请输入数量');return false}if (!(this.item.count>0)){alert('请输入正确数量');return false}this.items.push(this.item)  //放入数组},removeClick(index){this.items.splice(index,1)}},computed : {counts:function (){return this.count+10},totalPrice:function (){// var totalprice = 0// // for (var i=0 ; i<this.items.length ; i++){// //     totalprice +=this.items[i].price *this.items[i].count// // }// for (let item of this.items) {//     totalprice +=item.price*item.count// }// return totalpricereturn this.items.reduce(function (pre,item){return pre + item.price*item.count},0)},}})
</script>
</body>
</html>

vue小案例（小黑记事本和购物车）相关推荐

  1. Vue小案例-小黑记事本的实现

    小黑记事本综合应用了前面学习的集中指令,并且对指令进行综合性的基础应用联系.(样式没有写,仅实现了vue指令的功能.) <!DOCTYPE html> <html lang=&quo ...

  2. 简单的vue小demo——小黑记事本

    简单的vue小demo--小黑记事本 整体效果:完整代码在这里 一个简单的记事本,可实现简单的添加,删除,统计,清空,隐藏. 1.新增 1.1生成列表结果(v-for数组) 1.2获取用户输入(v-m ...

  3. vue案例小黑记事本详解

    大家好,今天学的东西不是很多,但遇到了一个特别有趣的vue小案例吧,我觉得可以拿出来给大家伙练练手,虽然案例简单,并不复杂,但也算是涵盖了vue大部分的常用知识点,希望大家可以多练练,有助于vue的学 ...

  4. Vue小案例1：计数器

    Vue小案例1:计数器 html页面: 准备两个按钮分别绑定两个事件对应加减add,sub:还有一个span容器放置数据,样式自己写没有太大要求 <div id="app"& ...

  5. 分析初识vue小案例

    前言 我们已经写好了一个案例:初识vue小案例 接下来我们就分析初识vue小案例 容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多 下面是一个一个容器对多个 ...

  6. 黑马程序员VUE学习笔记-小黑记事本案例

    自己写的样式,有很多不足,敬请见谅和指正.功能还是正常的. CSS部分 * {padding: 0;margin: 0; }#todoapp {width: 300px;margin: 5px aut ...

  7. vue本地项目——小黑记事本

    B站看到了一套vue框架入门课程,敲了一个小项目(小黑记事本),欢迎批评指教. 一.实现效果 输入框输入任务,按下回车键,添加到任务最后 鼠标移动到某项任务,该任务后面出现红色叉号,点击可删除次任务 ...

  8. 微信小程序 - 实战小案例 - 简易记事本

    多项技能,好像也不错.学习一下微信小程序. 教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ 简介:一套用来开发在手机微信上运行的app框架,不用安装 组成: ...

  9. Vue小案例——图书列表

    图书列表 案例显示 HTML 结构 CSS 样式 提供的静态数据 把提供好的数据渲染到页面上 对页面进行事件绑定 逻辑层次的JS代码 案例显示 图书列表 实现静态列表效果 基于数据实现模板效果 处里每 ...

最新文章

  1. BZOJ 1609 [Usaco2008 Feb]Eating Together麻烦的聚餐：LIS LDS (nlogn)
  2. C++：指针数组理解
  3. 为 Joomla 而生的 Kunena 论坛安装手册
  4. 解密Google、百度搜索引擎揭秘
  5. 最全 MyBatis 核心配置文件总结，速度收藏了～
  6. Caffe学习：Data
  7. Spark生态之Alluxio学习15--alluxio性能分析和加速方式
  8. 做本地服务业O2O要点有哪些 O2O营销模式未来发展趋势是什么？
  9. 敏感词高效检测从浅到深
  10. VM虚拟机安装Windows XP Service Pack 3 (x86)
  11. passenger+nginx框架部署
  12. java自动装箱|拆箱解密
  13. Html开屏广告源码,开屏(Splash)广告样式
  14. 将硬盘转换成GPT分区格式
  15. dbz-ui试用体验（connecting mysql...）
  16. ardupilot软件仿真及调试（vscode版）
  17. 一图了解券商IT战略咨询方法论
  18. 漫谈程序员系列：怎么告别“混日子”
  19. Win系统下制作U盘CLOVER引导+安装原版Mavericks10.9
  20. Arduino语法详解_含示例详解

热门文章

  1. Neutrino追问AMA第19期 | AlphaWallet CEO 张中南：Token化能为现有互联网从底层补足集成缺陷
  2. java servlet文件上传_JavaServlet的文件上传和下载
  3. CAS 介绍 单点登录认证系统
  4. windows2008
  5. ios 英文字体连体 five 的问题解决方案
  6. Spring Boot 项目使用Spring Security防护CSRF攻击实战
  7. java员工管理系统代码_员工管理系统JAVA源码(源码大小8M)
  8. 学习DS1820随记
  9. android和harmonyos对比,HarmonyOS和Android深度对比
  10. 添加pdfFactory Pro虚拟打印机的文本超链接