Vue学习(十)-过滤器以及案例(购物车)

过滤器

用来定义我们自己的文本格式化格式

使用

可以被使用的地方为 {{}}双括号里 | v-bind表达式里


<div id="app">{{ message | getValue }}div> 


<div id="app" v-bind:class="message | getValue">div>	

参数

  1. 使用时不传参数,过滤器函数会自动接收 message 作为第一个参数

    <div id="app">{{ message | getValue }}</div>
    
    filters: {
        getValue(message) {
            return message + ' Vue!'
        }
    }
    
  2. 定义时传参

    filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

    {{ message | filterA('arg1', arg2) }}
    

多重过滤器

如果有多重过滤器,先把 message 的值传入 filterA 然后将 filterA 的结果传递到 filterB 中。

{{ message | filterA | filterB }}

案例4:购物车案例

<style>
    table {
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
    }

    th,
    td {
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
        line-height: 23px;
    }

    th {
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
    }

    button {
        vertical-align: middle;
        border: 1px solid rgb(0, 140, 255);
        background-color: rgb(0, 174, 255);
        color: #fff;
        cursor: pointer;
    }

    tbody tr td:nth-child(1) {
        width: 172px;
    }
style>
head>

<body>
    <div id="app">
        <div v-if="data.length">
            <table>
                <thead>
                    <tr>
                        <th>书籍名称th>
                        <th>出版日期th>
                        <th>价格th>
                        <th>购买数量th>
                        <th>操作th>
                    tr>
                thead>
                <tbody>
                    <tr v-for='(item, index) in data'>
                        <td>{{item.name}}td>
                        <td>{{item.time}}td>
                        <td>{{item.num * item.price | getValue}}td>
                        <td><button @click="sub(index)" :disabled="item.num === 0">-button> {{item.num}} <button @click="add(index)">+button>td>
                        <td><button @click="removeHandle(index)">删除button>td>
                    tr>
                tbody>
            table>
        div>
        <h3 v-else>购物车为空h3>
        <h4>总价格 {{totalPrice | getValue}}h4>
    div>
    <script src="VueJs/vue.js">script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                data: [{
                    name: '《教父》',
                    time: '1894-12-01',
                    price: 80,
                    num: 1
                }, {
                    name: '《嫌疑犯X的献身》',
                    time: '1699-12-01',
                    price: 35,
                    num: 1
                }, {
                    name: '《基督山伯爵》',
                    time: '1979-12-01',
                    price: 56,
                    num: 1
                }, {
                    name: '《复活》',
                    time: '1887-05-30',
                    price: 15,
                    num: 1
                }]
            },
            computed: {		// 总价使用计算属性
                totalPrice() {
                    let total = 0;
                    this.data.forEach(item => {
                        total += (item.price * item.num)
                    })
                    return total
                },
            },
            methods: {
                add(index) {
                    this.data[index].num++;
                },
                sub(index) {
                    this.data[index].num--;
                },
                removeHandle(index) {		// 删除操作,删除对象里面对应的值
                    this.data.splice(index, 1);
                    console.log(index);
                },
            },
            filters: {		// 过滤器格式化字符串
                getValue(value) {
                    return '¥' + value.toFixed(2);
                }
            }
        })
    script>

你可能感兴趣的:(Vue框架学习)