结果如图：

代码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. Jmeter_选项_函数助手_RandomString的用法

    1.用处:测试账户注册可以通过随机生成数实现,而不需要Excel手动输入, 缺点:随机生成数可能会重复 优点:不需要使用CSV config 或者excel ,txt格式 2.举例:之前我们通过CSV ...

  2. mcast_set_ttl函数

    #include <errno.h> #include <net/if.h> #include <sys/socket.h> #include <netine ...

  3. 【STM32H7教程】第57章 STM32H7硬件JPEG编解码基础知识和HAL库API

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第57章       STM32H7硬件JPEG编解码基础知识 ...

  4. buuctf——facebook1

    分为注册和登陆两个页面 据大佬wp登陆页面又盲注,但我没测试 直接注册后登陆 注册后发现,会显示输入的url 根据目录扫描,发现robots.txt和flag.php robots.txt有源码备份 ...

  5. python opencv：绘图 基本图形

    参数说明 • img:你想要绘制图形的那幅图像. • color:形状的颜色.以 RGB 为例,需要传入一个元组,例如:( 255,0,0)代表蓝色.对于灰度图只需要传入灰度值. • thicknes ...

  6. traceback说明

    一:traceback说明 该模块提供了一个标准接口来提取,格式化和打印Python程序的堆栈跟踪.它完全模仿Python解释器在打印堆栈跟踪时的行为.当您想要在程序控制下打印堆栈跟踪时,这很有用. ...

  7. CPI 3.0磁盘空间不足！

    当使用Cisco PI的时候,有的时候可能出现diskspace不够的情况,这种情况可能是前期部署PI的时候,提供的空间太小了,或者目前缓存的数据太多了. 如下是一个例子: 在CLI中检查时,PI数据 ...

  8. Java IO流详解（五）——缓冲流

    缓冲流也叫高效流,是处理流的一种,即是作用在流上的流.其目的就是加快读取和写入数据的速度. 缓冲流本身并没有IO功能,只是在别的流上加上缓冲效果从而提高了效率.当对文件或其他目标频繁读写或操作效率低, ...

  9. hive启动报错（整合spark）

    spark整合hive后,hive启动报错: ls: cannot access /export/servers/spark/lib/spark-assembly-*.jar: No such fil ...

  10. 关于Android发送邮件

    Google 在发表 Android 手机平台时,强调的是超强大的网络支持能力,因此,无论通过 GPRS.3G的电信网络或者是Wifi的无线WLAN网络,都能够发EMAIL. 发送邮件中使用的Inte ...