结果如图：

代码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. linux 开启普通用户sudo root权限操作获取免密

    root 身份登陆 $ visudo然后进入修改配置找到 root    ALL=(ALL) ALL 在下面增加: yourusername ALL=(ALL)   NOPASSWD:  ALL ex ...

  2. 【笔记7-部署发布】从0开始 独立完成企业级Java电商网站开发(服务端)

    阿里云服务 购买 连接 购买域名 域名备案 域名解析 源配置步骤 资源地址 http://learning.happymmall.com/ 配置阿里云的yum源 1.备份 mv /etc/yum.re ...

  3. 5_5 集合栈计算机（UVa12096）<stack与STL其他容器的综合运用>

    有一个专门为了集合运算而设计的“集合栈”计算机.该机器有一个初始化为空的栈,并支持以下操作:( 维护 N(1≤N≤2000) 个操作, 可能的五种操作如下:) ■PUSH: 在栈顶加入一个空集合 A= ...

  4. ES6：let 与 const

    在ES6中,let 用来定义变量,const 用来定义常量 事实上var可以看成是js语言设计上的错误,但是不能移除,因为需要向后兼容 于是提出了一个新的关键字let,可以将let看成更完美的var ...

  5. idea配置jdk,maven,tomcat

    1.idea配置jdk  2.idea配置maven  3.idea配置tomcat

  6. pair node stack vector string priority_queue

    multiset 元素重复 自动排序 map #include <bits/stdc++.h> using namespace std; map<int,int> s;//自当 ...

  7. cookie,session,localStorage和sessionStorage

    cookies:存储于浏览器端的数据.可以设置 cookies 的Max-Age或者Expires到期时间,如果不设置时间,则在浏览器关闭窗口的时候会消失. session:存储于服务器端的数据.se ...

  8. Java面向对象编程 -1.5

    对象引用传递分析 类本身属于引用传递类型,既然是引用传递类型,那么就牵扯到内存的引用传递 所谓的引用传递的本质:同一块堆内存空间可以被不同的栈内存所指向,也可以更换指向. class Person{ ...

  9. springboot 打包成jar

    1.pom.xml配置 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins< ...

  10. nginx、apache和tomcat之间的关系和区别

    Apache/Nginx 应该叫做 HTTP Server,即安装后生成httpd服务. Tomcat 则是一个 Application Server,或者更准确的来说,是一个「Servlet/JSP ...