VUe for循环if 的使用和函数的使用 （笔记）

结果如图：

代码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 :1,
            name:"算法",
            data:"2006-9",
            price: 85,
            count:1},
            {   id :2,
                name:"unix编程",
                data:"2006-9",
                price: 85,
                count:1},
            {   id :3,
                name:"java入土",
                data:"2006-9",
                price: 85,
                count:1},

            ]
    },
    methods:{
        insc(index){
            this.books[index].count++;//注意这里的写法
        },
        dec(index)
        {
            this.books[index].count--;//注意这里的写法
        },
        removeit(index)
        {
            this.books.splice(index,1)//删除自身

        }

    },
    filters:{//注意是filtes 夹着s
        showY(price)
        {
            return "Y" +price
        }

    },computed:
        { totalPrice()
                //直接调用不用加括号
            {
                let totleprice=0;
                for (let i=0;i<this.books.length;i++)
                {totleprice+=this.books[i].price*this.books[i].count;

                }
                return totleprice
            }

        },

})

 

posted @ 2020-02-04 11:31  乌拉乌拉！！！  阅读(3433)  评论(0)  编辑  收藏  举报