vue中关于计算属性

最新推荐文章于 2022-10-15 09:06:56 发布

jackyZhao-fighting

最新推荐文章于 2022-10-15 09:06:56 发布

阅读量408

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_55577194/article/details/121341619

版权

首先vue计算属性出现的意义和价值是为了便于data中数据运算而产生的。产生的结果用新的属性来存储，准确的说计算属性的属性值根据data中的数据变化而变化。注：data中的数据不能数据运算。如以下代码：

<div id="app">
        <div style="width: 400px;height: 20px;border:1px solid #000;border-radius:8px ;">
            <div class="running" :style='{width:percentage+"px"}'></div>
        </div>
        <span>总销售量:</span><input type="text" v-model='sales'>
        <div>{{percentage}}</div>
    </div>
    <script src="./vue.js"></script>
    <script>

        new Vue({
            el: '#app',
            data: {
                totalStorage: 200,//注意data中的数据不能运算比如totalStorage:200/this.sales
                sales: ''
            },
            computed:{
            percentage(){
                return (this.sales/200)*400
            }//正因为data中数据不能运算计算属性才有了它的价值return返回运算后的结果， 
                  percentage为计算属性名 return返回的结果为计算属性值
            }
        })
    </script>