结果如图：

代码html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app"  >

    <div v-if="books.length>0">

<table>

    <thead>

    <tr>

        <th>书籍名称</th>

        <th>出版日期</th>

        <th>价格</th>

        <th>数量</th>

        <th>购买数</th>

        <th>操作</th>

        <th>移除</th>

    </tr>

    </thead>

    <tbody>

  <tr v-for="(item,index) in books">

      <th >{{item.id}}</th>

      <th >{{item.name}}</th>

      <th >{{item.data}}</th>

      <th >{{item.price|showY}}</th>

<!--      价格这里添加了过滤器-->

      <th ><button @click="insc(index)">+</button>

          {{item.count}}

           <button @click="dec(index)" v-bind:disabled="item.count<=1">-</button>

      </th>

      <th><button @click="removeit(index)">移除</button></th>

  </tr>

    </tbody>

</table>

<h3>总价格 :{{totalPrice}}</h3>

    </div>

    <div v-else>

        购物车为空

    </div>

</div>

</body>

<!--再之前和之后引入有区别-->

<script src="../JS/vue.js"></script>

<script src="../JS/main.js"></script>

</html>

main.js

const app=new Vue({

    el:"#app", //挂载那个元素//注意这里有井号 初学者容易掉

    data:{

        books:[{   id :,

            name:"算法",

            data:"2006-9",

            price: ,

            count:},

            {   id :,

                name:"unix编程",

                data:"2006-9",

                price: ,

                count:},

            {   id :,

                name:"java入土",

                data:"2006-9",

                price: ,

                count:},

            ]

    },

    methods:{

        insc(index){

            this.books[index].count++;//注意这里的写法

        },

        dec(index)

        {

            this.books[index].count--;//注意这里的写法

        },

        removeit(index)

        {

            this.books.splice(index,)//删除自身

        }

    },

    filters:{//注意是filtes 夹着s

        showY(price)

        {

            return "Y" +price

        }

    },computed:

        { totalPrice()

                //直接调用不用加括号

            {

                let totleprice=;

                for (let i=;i<this.books.length;i++)

                {totleprice+=this.books[i].price*this.books[i].count;

                }

                return totleprice

            }

        },

})

VUe for循环if 的使用和函数的使用 （笔记）的更多相关文章

  1. Vue中循环的反人类设计

    今天学习Vue到循环那里,表示真是不能理解Vue的反人类设计 具体看代码吧! <!DOCTYPE html> <html> <head> <meta char ...

  2. vue v-for循环的用法

    1.v-for循环普通数组 ①创建vue对象 ② 循环数据 结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对 ...

  3. 在vue项目中 如何定义全局变量 全局函数

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...

  4. Vue.js——循环（Java、JSTL标签库、数据库）

    一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ...

  5. vue.js循环for（列表渲染）详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  6. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  7. vue 2.5.14以上版本render函数不支持返回字符串

    vue 2.5.14以上版本render函数不再支持直接返回字符串,必须返回数组或vnode节点,如果返回字符串的话,渲染为空.详情可见源码. function createFunctionalCom ...

  8. Python学习：for 循环 与 range（）函数

    for 循环   For … in 语句是另一种循环语句,其特点是会在一系列对象上进行迭代(Iterates),即它会遍历序列中的每一个项目 注意:  1.else 部分是可选的.当循环中包含它时,它 ...

  9. 聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数？

    聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数 本文重点知识点速览: Vue 中的 watch 对象中的回调函数不能是箭头函数. 箭头函数中的 this 指向的是函数定义时所在的 ...

随机推荐

  1. 第一阶段集训（这篇先写写tarjan以及圆方树）

    第一阶段的集训结束了w,不得不说oi太长时间不整是会退步的. 怎么说好呢,集训这几天过的很充实,知识收货很多,题调的也不少,自己的目标更明确了吧,不过这几天集训也是可以看出蒟蒻就是蒟蒻,还是太菜了.. ...

  2. RTT学习之PWM、ADC设备

    一 使用步骤: 查找 PWM 设备获取设备句柄.rt_device_find() 设置 PWM 周期和脉冲宽度.rt_pwm_set(pwm_dev, PWM_DEV_CHANNEL, period, ...

  3. Java连载65-自定义手动抛出异常、子类的异常范围、数组初探

    一.手动抛出异常1.自定义无效名字异常: (1)编译时异常,直接继承Exception (2)运行时异常,直接继承RuntimeException 举例子:注意点:throws会向上抛出异常,跑到最上 ...

  4. /var/lib/gems/2.5.0/gems/seccomp-tools-1.3.0/lib/seccomp-tools/dumper.rb:125: warning: Insecure world writable dir /home/python/.local in PATH, mode 040777 解决方案

    /var/lib/gems/2.5.0/gems/seccomp-tools-1.3.0/lib/seccomp-tools/dumper.rb:125: warning: Insecure worl ...

  5. 2019牛客暑期多校训练营（第七场）A String （字符串的最小表示）

    思路 这题思路如果是递归的话,应该是比较正确的.但是实际上只用切割两次就可以了. 先把原串从后向前切割一次,再把每一部分切割一次. 切两次的思路实际上是有漏洞的. 递归的思路,终点是,如果串长为1,或 ...

  6. QLabel设置伙伴关系和快捷键（Alt+首字母）

    Qlabe中设置伙伴关系是使用Setbuddy函数: Qlabel.Setbuddy(QLineEdit) #将Qlabel和QLineEdit之间设置伙伴关系 另外,需要配合热键(快捷键)进行使用, ...

  7. Github 结合 Hexo 搭建轻量博客

    http://www.open-open.com/lib/view/open1481532171287.html 开始 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或 ...

  8. 【STM32H7教程】第54章 STM32H7的LTDC应用之LCD电阻触摸和电容触摸

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第54章       STM32H7的LTDC应用之LCD电阻 ...

  9. css简单整理

    style1.css /*统一设置h1.h2.a标签的样式*/ h1,h2,a{ color: aqua; font-size: 50px; } /*如果h1.h2没有上面的单独设置样式那么就会继承b ...

  10. Git - 删除github上的提交历史

    参考 https://segmentfault.com/q/1010000002898735 https://stackoverflow.com/questions/1338728/delete-co ...