vue如何根据返回的值对元素进行样式渲染

已于 2022-07-30 13:55:02 修改
阅读量1.3k 收藏 3
点赞数 1
分类专栏： vue相关 文章标签： vue.js javascript css
于 2021-03-25 16:39:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44070058/article/details/115212397
版权

vue如何根据返回的值对元素进行样式渲染

	<div id="cnblogs_post_body" class="blogpost-body blogpost-body-html" deep="3">

1、最终显示样式：

需要：根据任务状态值，显示不同颜色的原点表示任务状态，以及对优先级的数据，进行☆标记

在这里插入图片描述

2、代码实现：

　　在<el-table-column>中需要显示的内容前面，添加图标元素，并添加对应的class样式。

　　其中，addclassStatus以及addclassPriority两个方法是自己定义的计算，根据属性值计算class样式的方法

在这里插入图片描述

3、在vue中的 export default 中的methods中进addclassStatus以及addclassPriority方法的计算和赋值

在这里插入图片描述

4、在css文件中定义css样式

在这里插入图片描述

托尼比卡丘
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目 根据后台返回的数据动态渲染el-tabs
lannieZ的博客
06-03 3304
<el-tabs v-model="editableTabsValue" type="card" @tab-click="show_upsPage" class="sub"> <el-tab-pane :key="item.name" v-for="item in tabsList" :label="item.categoryName" :id="item.goodsCategoryId" :name="item.otherN
vue中拿后台返回的值，分别给样式
我的博客
09-16 688
vue中根据后台返回的值，分别给样式 1.我这里使用的是多个三目运算，目前感觉是比较好使的，有别的欢迎留言，，，， 代码 //我这里外面有层循环，所以是item.ex_id，根据拿到的id进行判断 <van-tag :class="[item.ex_id == 1 ? 'yi' : '', item.ex_id == 2 ? 'two' : '', item.ex_id == 3 ? 'san' : '', item.ex_id == 4 ? 'si' : '', item.ex_id == 5
vue根据不同的值给不同的样式
最新发布
Ga_Harbinds的博客
05-27 176
3.在方法中根据不同的值获取不同的样式。2.在methods中定义方法。1.给标签加上:class。
面试题-根据数据使用vue写一个原生table的渲染
weixin_43842488的博客
06-21 712
使用递归处理数据，并且使用while循环语句给数据添加合并单元格逻辑
vue 根据后端数据显示图片_vuejs 根据后台返回数组，渲染图片路径
weixin_39739404的博客
12-21 826
后台返回的数组为：["5", "1", "3", "2", "1",]页面要实现对应数量的黄色星星(例如：5的话，五颗黄色的星星，默认是五颗灰色的星星，此处图片就是一个示意，希望大家不要误解)：默认item里的数据：stars:[{starsUrl:"./img/net_more/star_off.png"},{starsUrl:"./img/net_more/star_off.png"},{st...
Vue3 computed根据返回的字段显示颜色
weixin_39428080的博客
08-17 662
Vue3 computed根据返回的字段显示颜色。
详解三种方式解决vue中v-html元素中标签样式
12-29
Vue为v-html中标签添加CSS样式 <h2 class=title>{{news.title}} <p class=news-time>{{news.datetime}} <button class=back @click=goBack()>返回列表</button> 当我们使用v-html...
解决vue项目获取dom元素宽高总是不准确问题
10-15
另外，如果你需要包含单位（如像素`px`）的数值，可以使用`window.getComputedStyle`来获取样式计算后的值： ```javascript const computedHeight = window.getComputedStyle(this.$refs.myDiv).height; const ...
Vue是怎么渲染template内的标签内容的
10-15
当Vue运行时，它会调用`render`函数，根据返回的VNode结构来创建和更新实际的DOM。这个过程包括： 1. **编译**：Vue首先将`template`编译为JavaScript代码，生成`render`函数。如果你直接提供`render`函数，Vue会跳...
vue渲染方式render和template的区别
11-20
在Vue.js中，有两种主要的渲染方式：`template`和`render`函数。它们都是用于定义组件的视图层，但工作原理和灵活性有所不同。理解它们的区别有助于开发更高效、可维护的Vue应用。 首先，`template`是Vue中更传统且...
基于VUE步骤进度条样式代码
04-06
在Vue组件中，我们可以使用`v-for`指令来循环渲染步骤，`v-bind:class`来根据步骤状态应用不同的CSS类： ```javascript (step, index) in steps" :key="index" :class="{ active: isActive(index) }"> ...
Vue中根据后端返回的某个字段，改变数据结构
卷发头的鲁智深的博客
06-01 1345
vue中数据结构转换，根据后端返回字段改变数据结构，前端改变数据结构 3.转换完成的数据结构:
vue根据表格行某列项项数据展示不同的样式
qq_42243957的博客
10-16 1134
Vue中如何根据数组里面的id渲染对应图片
weixin_42596214的博客
02-13 439
在Vue中，您可以在模板中使用 v-for 指令遍历数组，并使用对象的 id 属性动态绑定图片的 URL。 示例： <template> <div> <img v-for="item in items" :key="item.id" :src="'path/to/img/' + item.id + '.jpg'" /> </div> ...
vue.js根据获取到不同的数据显示不同的样式
热门推荐
6块腹肌的博客
11-11 2万+
项目需求： 项目需求如上图所示，要根据后台返回来的数据是否为天猫的数据，如果是天猫，返回来的值是1，然后页面就显示天猫的标志，如果返回来的值不是1，页面是显示淘的标志，这里介绍一下三目运算的实现方式。话不多少，直接上代码 // js代码： &lt;li class="item" v-for="item in itemData" :key="item"&gt; &lt;div clas...
vue.js li根据获取到不同的数据显示不同的样式
ougexingfuba的博客
04-01 2310
<li v-for="site in goodsList" :key="site.id" :class= "site.label2? 'list2' : 'list1'" > .list .list1{ width: 856px; heigh...
vue使用html渲染组件,Vue.js在渲染组件之前填充数据
weixin_39638603的博客
06-15 312
我是Vue.js的新手，我试图创建一个没有成功的简单组件，它包含一个selectList，我试图填充它的选项数据来模拟Ajax请求，这是我的代码：Vue.js在渲染组件之前填充数据HTML{{n.name}}Selected Team: {{team}}JSVue.component("my-select", {template: "#my-template",mounted: function(...
vue中通过数据绑定为元素设置样式
qq_39239110的博客
02-20 1517
通过数据绑定可以为元素设置class样式和style样式 一，class样式的设置 ------html中的代码 &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;!-- 第一种使用方式是直接传递一个数组，这里的的class需要用到v-bind属性 --&amp;gt; &amp;lt;!-- &amp;lt;h1 :class=&quot;['red','thin',
Vue3.x渲染流程（render()）
前端小记
04-08 5999
本文章是叙述的DIff算法之前，patch函数进行分类的探讨，关于DIff算法的深入了解可以看我另一篇文章
Vue中如何根据数组中不同内容渲染出不同样式
02-14
Vue 中可以使用计算属性来根据数组中的元素的不同内容来渲染出不同的样式。 首先，需要创建一个计算属性，该计算属性会根据数组元素的内容返回相应的样式类。 ``` computed: { computedClasses() { return this....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值