结果如图：

代码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. Anniversary party POJ - 2342

    题目链接 经典的树形dp,最大独立集,对于每个点就有2个状态,选/不选 设\(dp_{i,0}\)表示不选第i个,\(dp_{i,1}\)表示选第i个,容易得到其状态转移 \(dp_{i,0} = \ ...

  2. 「JSOI2015」字符串树

    「JSOI2015」字符串树 传送门 显然可以树上差分. 我们对于树上每一条从根出发的路径都开一 棵 \(\text{Trie}\) 树,那么我们就只需要在 \(\text{Trie}\) 树中插入一 ...

  3. Java JDBC 数据库链接小结随笔

    Java JDBC 数据库链接小结随笔 一.链接数据库的步骤 二.关于Statement  和  PrepareStatement 两者区别 用法 三.关于 ResultSet 的一些小结 四.自定义 ...

  4. 安洵杯iamthinking(tp6反序列化链)

    安洵杯iamthinking tp6pop链 考点: 1.tp6.0反序列化链 2.parse_url()绕过 利用链: 前半部分利用链(tp6.0) think\Model --> __des ...

  5. Hadoop _ 疑难杂症 解决1 - WARN util.NativeCodeLoader: Unable to load native-hadoop library for your plat

    最近博主在进行Hive测试 压缩解压缩的时候 遇到了这个问题, 该问题也常出现在日常 hdfs 指令中, 在启动服务 与 hdfs dfs 执行指令的时候 : 都会显示该提示,下面描述下该问题应该如何 ...

  6. kibana 开发工具介绍

    kibana上查看es集群节点信息 get /_cat/nodes?v ip heap.percent ram.percent cpu load_1m load_5m load_15m node.ro ...

  7. Cisco 3702i TX功率图

    有关思科TX Power选择的一些基本信息: 思科使用1到8的等级,其中1是最高功率,8是最低功率虽然比例上升到8,但不是每个band都使用(0-7)8个数据中的所有值.每个数字都有一个相应的dBm值 ...

  8. Codeforces Round #620 (Div. 2) C. Air Conditioner

    Gildong owns a bulgogi restaurant. The restaurant has a lot of customers, so many of them like to ma ...

  9. JSON 解析中遇到的坑😭

    最近做加解密遇到一个很“奇葩的问题”,解析服务端加密后的字符串 序列化 时一直报错 "json解析失败:Error Domain=NSCocoaErrorDomain Code=3840 & ...

  10. python--脚本传参与shell脚本传参（位置参数）

    写一个最简单的shell脚本,了解shell脚本是如何传参 1. vim test1.sh name=$1 age=$2 echo ${name} echo ${age} 2.调用脚本并传参 sh t ...