Vue笔记14_过滤器

最新推荐文章于 2024-07-24 14:58:19 发布

qqq777_

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量61

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qqq777_/article/details/115478513

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>名称</th>
                    <th>日期</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- tr是表单每行，td为每行的列元素 -->
                <tr v-for='(item,index) in list'>
                    <td>{{item.book}}</td>
                    <td>{{item.date}}</td>
                    <td>{{item.price | showprice}}</td>
                    <td>
                        <button @click='item.num--' v-bind:disabled='item.num==1'>-</button>
                        {{item.num}}
                        <button @click='item.num++'>+</button>
                    </td>
                    <td>
                        <button @click='remove(index)'>移除</button>
                    </td>

                </tr>
            </tbody>
        </table>
        <div>
            总价格：{{total}}
        </div>
        <!-- <ul>
            <li v-for='(item,index) in list'>
                {{index+1}}{{item.book}}-{{item.date}}-{{item.price}}
                <button @click='item.num--'>-</button>{{item.num}}
                <button @click='item.num++'>+</button>
            </li>
        </ul> -->
    </div>
    <script src="vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                list:[
                    {book:'算法',date:'2006',price:85,num:'1'},
                    {book:'编程',date:'2003',price:35,num:'1'}
                ]
             },
            computed:{
                total(){
                    let total=0;
                    for(let i=0;i<this.list.length;i++){
                        total+=this.list[i].price*this.list[i].num;
                    }
                    return total;
                }
            },
            methods:{
                remove(index){
                this.list.splice(index,1)
                }
            },
            filters:{
                showprice(price){
                    return '$'+price.toFixed(2)
                }
            } 
        })
        //axios.get('https://autumnfish.cn/api/joke/list?num=3')
            
    </script>
</body>
</html>

qqq777_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记14_过滤器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫

专栏目录