找回密码
当前位置：前端开发者 > Vue.js > 正文

使用 computed 计算性能被混合到Vue实例

2018-10-19 分类：Vue.js 阅读(881) 评论(0)
前端开发必备技能
web前端开发专业技能
web前端开发专业技能介绍

使用场景：购物车

通常大家在计算购物车总价的时候，在点击商品的时候，累加商品单价，而忽略了vue 自带的计算性能。

（当然解决方法不是唯一的，最好提出这个解决方案！！！）直接贴码：
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <!–<script src=”src/vue.min.js”></script>
<script src=”src/vue-validator.min.js”></script>–>
    <script src=”https://unpkg.com/vue@1.0.26/dist/vue.min.js”></script>
    <style>
        .red {
color:red;
}
.btn{
display:inline-block;
padding:10px;
background:orange;
color:#FFF;
cursor:pointer;
}
.btn:hover{
background: orangered;
}
</style>
</head>
<body id=”app”>
    <validator name=”validatorMethod”>
        <div class=”username”>
            <label for=””>第一个值</label>
            <input type=”text” v-model=”firstNum” placeholder=”第一个值”>
        </div>
        <p>+</p>
        <div class=”password”>
            <label for=””>第二个值</label>
            <input type=”text” v-model=”sendNum” value=”5″ disabled=”true”>
        </div>
        <div><a @click=”requestClk” class=”btn”>结算</a></div>
        <p v-if=”isTrue”>{{aPlus}}</p>
    </validator>
</body>
<script>
    var vue = new Vue({
        el: ‘#app’,
        data: {
            firstNum: 0,
            sendNum: 5,
            total: 0,
            isTrue: false
        },
        computed: {
            aPlus: {
                get: function () {
                    return this.total;
                },
                set: function (v) {
                    return this.total = parseInt(v) + parseInt(this.sendNum)
                }
            }
        },
        methods: {
            requestClk: function () {
                this.aPlus = this.firstNum
                this.isTrue = true;
            }
        }
    })
</script>
</html>
web前端开发所需技能
前端开发要掌握的技能
前端掌握开发技能描述
赞(0)
前端开发者 » 使用 computed 计算性能被混合到Vue实例
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论