Vue计算属性

最新推荐文章于 2023-08-08 08:45:00 发布

猫三棂

最新推荐文章于 2023-08-08 08:45:00 发布

阅读量895

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yjj1123456/article/details/128256982

版权

计算属性需要定义在computed选项中。当计算属性依赖的数据发生变化时,这个属性的值会自动更新，所有依赖该属性的数据绑定也会同步进行更新。

在一个计算属性里可以实现备种复杂的逻辑,包括运算、函数调用等。示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../JS/vue.js"></script><!--导入-->
<body>
<div id="example">
    <p>原字符串：{{str}}</p>
    <p>新字符串：{{newstr}}</p>
</div>
<script type="text/javascript">
    var exam = new Vue({
        el: '#example',
        data: {
            str: 'HTML*JavaScript*Vue.js'
        },
        computed: {
            newstr : function () {
                return this.str.split('*').join('+');
            }
        }
    })
</script>
</body>
</html>

网页效果：

F12控制台后改变属性的值后我们将得到：

实现了改变数据，实时更新。

计算属性应用在购物车：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            font-family:微软雅黑;
            font-size:14px}
        .title{
            background: #f6f6f6;
            font-size:18px;
        }
        .title,.content{
            width:400px;
            height:36px;
            line-height:36px;
            border: 1px solid #dddddd;}
        .title:not(:first-child),.content{
            border-top:none;}
        .title div{
            width:100px;
            text-align:center;
            float:left}
        .content{
            clear:both}
        .content div{
            width:100px;
            text-align:center;
            float:left}
        p{
            width:380px;
            text-align:right;}

    </style>
</head>
<script src="../JS/vue.js"></script>
<body>
    <div id="example">
        <div class="title">
            <div>商品名称</div>
            <div>单价</div>
            <div>数量</div>
            <div>金额</div>
        </div>
        <div class="content" v-for="value in shop">
            <div>{{value.name}}</div>
            <div>{{value.price|twoDecimal}}</div>
            <div>{{value.count}}</div>
            <div>{{value.price*value.count|twoDecimal}}</div><!--使用过滤器twoDecimal-->
        </div>
        <p>合计:{{totalprice | formatPrice("¥")}}</p><!--使用过滤器formatPrice-->
    </div>
<script type="text/javascript">
    var exam = new Vue({
        el:'#example',
        data:{
            shop:[{
                name:'OPPO R15',
                price:2999,
                count:3
            },{
                name:'华为P20',
                price:3699,
                count:2
            }
            ]
        },
        computed:{
            totalprice:function () {
                var total = 0;
                this.shop.forEach(function (s) {
                    total+=s.price*s.count;//计算总价
                });
                return total;
            }
        },
        filters:{
            twoDecimal:function (value) {
                // toFixed(value)保留？位小数
                return value.toFixed(2);
            },
            formatPrice:function (value,symbol) {
                //该例子中symbol即为传过来的"¥"
                return symbol+value.toFixed(2);
            }
        }
    })
</script>
</body>
</html>

效果：