7.Vue计算属性

最新推荐文章于 2023-06-02 14:31:01 发布

what's your name.

最新推荐文章于 2023-06-02 14:31:01 发布

阅读量332

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45874347/article/details/122850694

版权

Vue学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

基本使用

1：定义测试数据和方法。

<script src="js/vue.global.js"></script>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                message: "Hello Vue!!!"
            }
        },
        computed: {
            reverseMessageByComputed: function () {
                return this.message.split("").reverse().join("");
            },
            messageChange: function () {
                console.log("123");
                return this.message + "ok";
            },
        },
        methods: {
            reverseMessageByArr() {
                return this.message.split("").reverse().join("");
            }
        }
    }).mount("#app");
</script>

2：计算属性实现赋值。

<p>{ {reverseMessageByArr()} }</p>
<p>{ {reverseMessageByComputed} }</p>
<input type="text" v-model="message">{ {messageChange} }</input>

3：测试结果。

在这里插入图片描述

结合案例：准备工作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-computed</title>
    <style>
        table { width: 100%; border-collapse: collapse; }
        table tr td { border: 1px solid #ccc; padding: 10px; }
        .container { background: #eee; padding: 20px; margin-bottom: 10px; }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <p>商品主键：<input type="text" v-model="product.id"></p>
        <p>商品标题：<input type="text" v-model="product.title"></p>
        <p>商品价格：<input type="text" v-model="product.price"></p>
        <p>商品数量：<input type="text" v-model="product.num"></p>
        <p>添加时间：<input type="text" v-model="product.addTime"></p>
        <p>
            <button @click="pushProduct">push添加商品</button> &nbsp;&nbsp;&nbsp;
        </p>
    </div>
    <table>
        <thead>
        <tr>
            <td>index</td>
            <td><input type="checkbox"></td>
            <td>ID</td>
            <td>产品名称</td>
            <td @click="sortProduct('sortPrice', 'price')">产品价格 { {!sortPrice ? "升序" : "降序"} }</td>
            <td @click="sortProduct('sortNum', 'num')">产品数量 { {!sortNum ? "升序" : "降序"} }</td>
            <td>小计</td>
            <td>时间</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(product, index) in products" :key="product.id">
            <td>{ {index} }</td>
            <td><input type="checkbox"></td>
            <td>{ {product.id} }</td>
            <td>{ {product.title} }</td>
            <td>{ {product.price} }</td>
            <td>{ {product.num} }</td>
            <td>{ {product.num * product.price} }</td>
            <td>{ {product.addTime} }</td>
            <td><a href="">编辑</a> <a href="javascript:void(0)" @click="delProductByIndex(index)">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>
<script src="js/vue.global.js"></script>
<script>
    var vue = Vue.createApp({
        data() {
            return {
                products: [],
                product: { id: 0, title: "0", price: 0, num: 1, addTime:"2012-11-12 12:12:12" },
            }
        },
        created() {
            this.products =  [
                { id: 1, title: "小米11", price: 125.8, num: 12, addTime: "2012-11-12 12:12:12" },
                { id: 2, title: "小米12", price: 25.8, num: 2, addTime: "2011-12-08 12:12:12" },
                { id: 3, title: "小米13", price: 15.8, num: 1, addTime: "2012-02-10 12:12:12" },
                { id: 4, title: "小米14", price: 5.8, num: 11, addTime: "2019-10-11 12:12:12" },
                { id: 5, title: "小米15", price: 15.8, num: 58, addTime: "2017-02-22 12:12:12" }
            ];
        },
        computed: {
            totalPrice: function () {
                var total = 0;
                this.products.forEach(product => {
                    total += product.price * product.num;
                })
                return total;
            }
        },
        methods: {
            pushProduct() {
                this.products.push({...this.product});
            },
            delProductByIndex(index) {
                this.products.splice(index, 1);
            }
        }
    }).mount("#app");
</script>
</body>
</html>

计算总计

1：定义相应计算属性。

totalPrice: function () {
    var total = 0;
    this.products.forEach(product => {
        total += product.price * product.num;
    })
    return total;
},

2：实现相关计算。

<tfoot>
<td colspan="10">总计：{ {totalPrice} }</td>
</tfoot>

3：测试结果。

在这里插入图片描述

添加￥符及格式化日期

1：定义相应方法和计算属性。

computed: {
    totalPrice: function () {
        var total = 0;
        this.products.forEach(product => {
            total += product.price * product.num;
        })
        return "￥" + total;
    },
    newProducts: function () {
        this.products.map(product => {
            product.priceStr = "￥" + product.price;
            product.aTime = this.dateFmt(product.addTime, "yyyy-MM-dd HH:mm:ss");
            return product;
        })
        return this.products;
    }
},
methods: {
    pushProduct() {
        this.products.push({...this.product});
    },
    delProductByIndex(index) {
        this.products.splice(index, 1);
    },
    dateFmt(dateStr, fmt){
        var date = new Date(dateStr.replace(/-/ig,"/"));
        var o = {
            "M+" : date.getMonth() + 1,                   //月份
            "d+" : date.getDate(),                        //日
            "H+" : date.getHours(),                       //小时
            "m+" : date.getMinutes(),                     //分
            "s+" : date.getSeconds(),                     //秒
            "q+" : Math.floor((date.getMonth() + 3) / 3), //季度
            "S"  : date.getMilliseconds()                 //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
        for(var k in o)
            if (new RegExp("("+ k +")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        return fmt;
    }
}

2：实现相关添加及格式化。

<tr v-for="(product, index) in newProducts" :key="product.id">
    <td>{ {index} }</td>
    <td><input type="checkbox"></td>
    <td>{ {product.id} }</td>
    <td>{ {product.title} }</td>
    <td>{ {product.priceStr} }</td>
    <td>{ {product.num} }</td>
    <td>{ {product.num * product.price} }</td>
    <td>{ {product.aTime} }</td>
    <td><a href="">编辑</a> <a href="javascript:void(0)" @click="delProductByIndex(index)">删除</a></td>
</tr>

3：测试结果。
在这里插入图片描述

增减数量

1：定义相应方法。

mius(index) {
    this.products[index].num--;
},
plus(index) {
    this.products[index].num++;
}

2：实现相关增减。

<td><button @click="mius(index)">-</button> { {product.num} } <button @click="plus(index)">+</button></td>

3：测试结果。

在这里插入图片描述

what's your name.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

7.Vue计算属性

基本使用

结合案例：准备工作

计算总计

添加 ￥ 符及格式化日期

增减数量

添加￥符及格式化日期