结果如图：

代码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. json 字符串 <----> json 对象

    一,字符串 -->JSON对象 1,转换函数 JSON.parse(json_str): 2,$.parseJSON(json_str):  用的是 jquery 的插件  所以需要引入 jq. ...

  2. HDU 4825 Xor Sum（字典树）

    嗯... 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4825 这道题更明确的说是一道01字典树,如果ch[u][id^1]有值,那么就向下继续查找/ ...

  3. Fluent_Python_Part2数据结构，02-array-seq，序列类型

    1. 序列数据 例如字符串.列表.字节序列.元组.XML元素.数据库查询结果等,在Python中用统一的风格去处理.例如,迭代.切片.排序.拼接等. 2. 容器序列与扁平序列 容器序列:容器对象包含任 ...

  4. Ubuntu python3 与 python2 的 pip调用

    ubuntu 是默认装有pytthon2.x 与 python3.x 共存的 通常终端里 python 表示 python2 版本 python3 表示 python3 版本 (如果你没更改软链接设置 ...

  5. Windows 查看并关闭占用指定端口的程序

    windows关闭端口的小工具: 链接:https://pan.baidu.com/s/1ZGL4cdSluy0lbi3tDERUvA 提取码:spxy 查看指定端口的使用情况 netstat -an ...

  6. JDBC 预编译语句对象

    Statement的安全问题:Statement的执行其实是直接拼接SQL语句,看成一个整体,然后再一起执行的. String sql = "xxx"; // ? 预先对SQL语句 ...

  7. FastDFS上传文件访问url地址直接下载

    fdfs 存储节点storage安装nginx,修改nginx配置文件 location ~/group[1-9]/M00 {  if ( $query_string ~* ^(.*)paramete ...

  8. IKAnalyzer使用

    1.分析器 所有分析器最终继承的类都是Analyzer 1.1 默认标准分析器:StandardAnalyzer 在我们创建索引的时候,我们使用到了IndexWriterConfig对象,在我们创建索 ...

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

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

  10. vue通过get方法下载java服务器excel模板

    vue方法 handleDownTemplateXls(fileName){ if(!fileName || typeof fileName != "string"){ fileN ...