Vue——使用 computed 计算属性

根据人次数值分别展示不同得背景色

<span style="font-weight:600">用户位置</span>
<divclass="mt-4"id="login-location":style="{ float: 'left', width: '100%' }"
><v-data-table:headers="location_headers":items="locations"class="elevation-0":hide-default-footer="true":disable-sort="true":fixed-header="true"no-data-text="暂无数据"><templatev-slot:[`item.value`]="{ item }"v-if="locations.length > 0"><v-chip :color="getColor(locationsNum, locations, item.value)">{{ item.value }}</v-chip></template></v-data-table>
</div>export default {data() {return {locations: [{"name": "广西","value": 3},{"name": "南宁","value": 1}],location_headers: [{text: "位置名称",value: "name"},{text: "人次",value: "value"}],};},methods:{getColor(statistic_num, curdata, num) {let curdataLen = curdata.length;let avg = num / (statistic_num / curdataLen) / 2;return `rgba(0,118,196,${avg})`;}},computed: {locationsNum() {let s = 0;for (let item of this.locations) {s += item.value;}return s;}}
};

Vue——使用 computed 计算属性相关推荐

Vue中computed计算属性和data数据获取的问题
获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"><h ...
Vue中computed(计算属性)、methods、watch的区别
初学vue,阅读api后,发现Vue提供了多种逻辑处理的方法,单纯的方法methods,computed(计算属性)以及watch等,充分理解这三者的区别,才能写出更加健壮的Vue代码. 1.meth ...
vue的computed计算属性学习
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护.这时候需要使用到vue的计算属性computed. 文件目录结构如下:利用vue脚手架创建这 ...
vue 中 computed 计算属性的用法
计算属性实质就是一个方法,只不过在使用的时候只把方法名称作为属性使用,不需要加(),而不是当做方法使用. 只有计算属性的方法内部所用到的任何data中的数据发生变化,就会立刻重新计算这个计算属性的值. ...
Vue的computed(计算属性)使用实例之TodoList
最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...
面试题！vue中的计算属性、方法、侦听属性
1.计算属性详细的内容可跳转至vue 计算属性可以使用计算属性来代替在表达式中进行的复杂运算,以便于能够更方便的维护与复用逻辑. 计算属性是在选项对象中使用 computed 字段来定义. 特点: ...
深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长拿官网简单的例子来看一下: <div id="example"><p> ...
Vue中的computed计算属性
文章目录 computed与watch的异同不同点相同点示例源码结果分析 computed与watch的异同不同点触发条件不同 computed计算属性会依赖于使用它的data属性 ...
Vue入门【三】-- 详解computed计算属性
目录 computed: ♡ ‧₊˚ 基本使用 ‧₊˚ ♡ ♡ ‧₊˚语法‧₊˚ ♡ ♡ ‧₊˚效果‧₊˚ ♡ ♡ ‧₊˚ 面试问点 ‧₊˚ ♡ computed与methods的区别: comput ...

Vue——使用 computed 计算属性

Vue——使用 computed 计算属性相关推荐

最新文章

热门文章