vue v-for 样式赋值

最新推荐文章于 2024-06-10 14:32:22 发布
最新推荐文章于 2024-06-10 14:32:22 发布
阅读量3.7k 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moxiaoya1314/article/details/78746605
版权
<span v-for="item in data2Source">
<div class="col-md-3 col-sm-3 col-xs-3">
<span class="iconSize" v-if="item.icon === ''">
<i class="el-icon-news" v-if="item.iconColor === ''" style="background-color: #3EBAEC;"></i>
<i class="el-icon-news" v-else v-bind:style="{'background-color': item.iconColor}"></i>
<font>{{item.name}}</font>
</span>
<span class="iconSize" v-else>
<i :class="item.icon" v-if="item.iconColor === ''" style="background-color: #3EBAEC;"></i>
<i :class="item.icon" v-else v-bind:style="{'background-color': item.iconColor}"></i>
<font>{{item.name}}</font>
</span>
</div>

</span>


直接上代码吧! v-bind:style="{'background-color': item.iconColor}" 为样式赋值,将获取的json 样式赋值给style

__心诺
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue赋值样式_Vue 2.0的学习笔记：在Vue中使用样式
weixin_36316574的博客
12-23 283
到目前为止，学习Vue的时候也写了相当的示例，但老实说，这些示例在视觉上并没有什么吸引人的地方。今天我们将学习如何将样式运用到我们的元素中，让事情变得更加有趣。首先我们将通过将内联样式添加到HTML的元素中，其实也就是我们以前所说的内联样式。其实在学习v-bind的时候，我们已经或多或少的接触了，如何给元素添加内联样式或者绑定类名添加样式。但这可能不够系统，为了更好的学习这方面的知识，这篇文章专门...
vue样式绑定
sxy705242410的博客
12-25 216
VUE样式绑定1. v-bind:class设置一个对象，动态切换class2. :class可以和class共存3. :class可以绑定数据中的对象4. 三元表达式5.v-bind:class设置一个数组6.数组语法中使用对象语法7.定义一个数组通过不同索引值获取不同样式8. 绑定内联样式 1. v-bind:class设置一个对象，动态切换class <div :class="{'active':isActive}">xxx</div> //样式是否起作用，根据isActiv
vue-2 组件传值
最新发布
qq_40824748的博客
06-10 793
慎用 provide / injectVuex 和 provide/inject 最大的区别：Vuex 中的全局状态的每次修改是可以追踪回溯的，而 provide/inject 中变量的修改是无法控制的。换句话说，不知道是哪个组件修改了这个全局状态。
Vue使用v-for与v-if搭配满足条件进行赋值，和v-if三目表达式的使用
Java小皮孩
12-12 9352
Vue使用v-for遍历的时候，通过{{}}进行赋值 {{user.companyName = item.companyName}} <select class="form-control" v-model="user.companyId"> <!-- 遍历所有的公司信息 --> <template v-for="item in allCompany"> <option :value="item.companyId" v-if="u
vue中v-for循环给标签属性赋值的方法
10-17
主要介绍了vue中v-for循环给标签属性赋值的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue赋值样式_vue 添加样式分几种方法
weixin_34122028的博客
01-30 827
一.new Vue({el: ‘#app‘,data: {isActive: true}})二.v-bind:class="{ active: isActive, ‘text-danger‘: hasError }">new Vue({el: ‘#app‘,data: {isActive: true,hasError: true}})三..active {width: 100px;heigh...
在vue的v-for中使用索引index值
01-06
在Vue.js框架中，`v-for`指令是一个非常重要的特性，用于遍历数组或对象，渲染列表或重复的模板。当我们需要在`v-for`循环中跟踪每个项目的唯一标识或执行特定操作时，可以利用其提供的索引`index`值。下面我们将...
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
10-15
在Vue.js中，`v-for`指令用于循环渲染列表数据，而实现点击列表项（li）使其字体变红，可以通过动态绑定CSS类来实现。在这个示例中，我们看到一个包含多个li元素的列表，每个li元素对应于`lists`数组中的一个对象。...
vue2.0 可折叠列表 v-for循环展示的实例
10-18
`v-for`是Vue中的一个指令，用于遍历数组或对象。在这个例子中，`v-for`用于遍历`data_item.details`数组，生成多个`sheet-content`元素。语法是`v-for="i in data_item.details"`，其中`i`是每轮迭代中的临时变量...
Vuejs在v-for中,利用index来对第一项添加class的方法
11-26
在Vue.js中，`v-for`指令用于循环遍历数组或对象，并且在每次迭代时为每个元素绑定数据。在某些场景下，我们可能需要在循环中为特定元素添加特殊的CSS类，例如为列表的第一项添加`active`类。本文将详细解释如何在...
Vue_样式绑定
大脸猫~
06-29 472
1.v-bind：class=‘{activitded:isActivitded} ’ class的对象绑定 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;如果是是一个对象，{red:’isRed’} key 是class的名字，value是是否有这个class 变量是一个布尔值 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp
VUE-004-动态给style赋值
weixin_39568072的博客
12-21 2309
<el-button :style="{width: buttonWidth}"></el-button> 比如：当判断当前界面是英文模式下，width是90px，中文模式下，width是80px； <script> computed: { buttonWidth: function() { return getLang() == 'zh_CN' ? 80 + 'px' : 90 + 'px'; } .
Vue的赋值，指令，过滤，计算属性，监控属性
qq_44424498的博客
10-23 778
Vue的赋值 vue有4种赋值方式 1.文本的方式 2.HTML的方式 3.属性的方式 4.表达式 <!--在样式中加 <style> .class1{ font-size: 12px; color: darkgreen } </style> --> <body> <div id=...
vue基本语法01赋值、表达式、指令、修饰符、简写、过滤、监听
qq_45555170的博客
10-08 1424
vue基本语法01赋值、表达式、指令、修饰符、简写、过滤、监听一、vue赋值的三种方式二、表达式三、指令四、修饰符五、监听 一、vue赋值的三种方式 1、{{属性名}} <h2>{{data}}</h2> 2、v-html:能输出源码信息 <input v-model="name"/> 3、v-text：只能输出文本信息 <div v-text="sa" style="color: blue;"></div> 二、表达式 vue支持所有的js
vue中v-for循环中class变量带入与style变量带入
m0_37632915的博客
04-29 4057
初学vue碰到了变量不知道如何带入的问题，尝试了和寻找答案后做出以下总结： 话不多说直接上代码 <item class="item-icon-right" style="height: 50px" v-for="(item, index) in items_income" :key="index" @click.native="onItemClick(item.id)"> <i...
Vue中使用v-for给img中的src属性赋值
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
08-03 4267
问题 在我们之前使用v-for的时候习惯性使用 {{item.id}}对其进行输出值 <div id="app"> <div v-for="item in list"> <img src="{{item.itemImg}}"> //并不会读取到 </div> </div> 如上所示，当我们需要用值来给src属性赋值时就遇到了一点点小困难 因为我们需要每次都为src重新赋值 所以 直接为src赋值 指定是错
vue2.0 根据状态值进行样式的改变展示
热门推荐
yyjourney的博客
01-08 1万+
用户在进行流程操作的时候，一般分为进行中，未开始，已完成，前端页面就要进行相应的状态区分展示。这里测试的是背景颜色区分。 demo: span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}span> statusText: { 0:
带你详细了解Vue中的v-for
sky89299的博客
04-11 1万+
## v-for 0. 作用： 列表渲染，所在标签结构，按照数据数量，循环生成。指令写在谁身上，就循环创建谁 0. 语法： `v-for = "(值变量，索引变量) in 目标结构" ：key = 索引变量` `v-for = "值变量 in 目标结构 ：key = 索引变量"` 目标结构：可以是数组，对象，字符串 0. 数组方法如果修改了原数据就会更新 页面，如果没有修改，则不会，但可以重新赋值给变量让你页面更新 0. v-for中的key作用：在更新的时候
鼠标悬停v-for元素展示详细信息
09-02
### 回答1： 你可以使用Vue.js提供的指令v-tooltip来实现鼠标悬停v-for元素展示详细信息的效果。具体实现步骤如下： 1. 首先，在你的Vue组件中引入tooltip.js和tooltip.css文件。 2. 在你的Vue组件中使用v-for指令渲染需要展示的数据。 3. 使用v-tooltip指令，在需要展示详细信息的元素上添加该指令，并将需要展示的信息作为参数传入。 4. 在你的Vue组件中定义tooltip选项，设置展示详细信息的样式和位置等参数。 下面是一个示例代码： ``` <template> <div> <div v-for="item in items" :key="item.id" v-tooltip="item.tooltip"> {{ item.name }} </div> </div> </template> <script> import 'tooltip.js/dist/tooltip.css'; import Tooltip from 'tooltip.js'; export default { data() { return { items: [ { id: 1, name: 'item1', tooltip: 'This is item1' }, { id: 2, name: 'item2', tooltip: 'This is item2' }, { id: 3, name: 'item3', tooltip: 'This is item3' } ] }; }, mounted() { this.setupTooltip(); }, methods: { setupTooltip() { const options = { placement: 'bottom', delay: { show: 500, hide: 100 }, trigger: 'hover' }; const tooltips = this.$el.querySelectorAll('[data-toggle="tooltip"]'); tooltips.forEach(el => { new Tooltip(el, options); }); } } }; </script> ``` 在上面的代码中，我们首先引入了tooltip.js和tooltip.css文件，然后在模板中使用v-for指令渲染需要展示的数据。在需要展示详细信息的元素上，我们使用v-tooltip指令，并将需要展示的信息作为参数传入。 最后，在mounted生命周期钩子函数中调用setupTooltip方法来初始化tooltip选项，设置展示详细信息的样式和位置等参数。 希望以上代码可以帮助到你。 ### 回答2： 鼠标悬停v-for元素展示详细信息是一种常见的网页交互设计技术。它主要通过在HTML和Vue.js中使用相关功能来实现。具体来说，通过v-for指令可以循环遍历数据列表，并在页面上渲染出多个相同的元素。而鼠标悬停功能则可以通过Vue.js的事件绑定来实现。 首先，需要在Vue实例中定义一个数据列表，用于存储详细信息。这个列表可以包含各种属性，比如名称、描述、图片链接等。然后，在HTML中使用v-for指令，将这个数据列表循环渲染出多个元素。每个元素都可以根据循环过程中的索引值来获取相应的详细信息。 接下来，通过在HTML元素上绑定事件，可以定义一个鼠标悬停的事件处理函数。这个处理函数可以使用Vue.js提供的事件修饰符，比如@mouseover，来监听鼠标悬停事件。当鼠标悬停在某个元素上时，事件处理函数会被触发。 在事件处理函数中，可以根据悬停元素的索引值，从数据列表中获取相应的详细信息，并将其赋值给一个专门用于展示详细信息的变量。通过将这个变量与另一个HTML元素进行绑定，就可以实现在悬停元素旁边展示详细信息的效果。 总的来说，通过在HTML中使用v-for指令循环渲染元素，并在鼠标悬停时触发相应的事件处理函数，可以实现鼠标悬停v-for元素展示详细信息的效果。这种交互设计常用于商品列表、用户列表等需要展示详细信息的场景，提升用户体验和信息展示效果。 ### 回答3： 鼠标悬停v-for元素展示详细信息是一种常见的交互效果，可以提供更多的信息给用户，增强用户体验。为了实现这个效果，可以通过以下步骤： 1. 在Vue组件中，使用`v-for`指令循环遍历一个数据列表，并绑定到一个DOM元素上。例如，可以使用`v-for="(item, index) in items"`来循环渲染数据列表。 2. 在DOM元素上添加`@mouseover`和`@mouseout`事件监听器，分别用来处理鼠标悬停和鼠标离开事件。 3. 在鼠标悬停事件的处理函数中，根据当前悬停的元素的索引或其他标识，来获取对应的详细信息数据，并将其保存到Vue实例的数据属性中。例如，可以使用`this.details = this.items[index].details`来保存详细信息数据。 4. 在HTML模板中，可以使用`v-if`指令判断是否展示详细信息，并使用`v-show`指令控制详细信息的显示与隐藏。例如，可以在`v-for`循环中的每一个元素上添加一个元素，通过`v-show="details === item.details"`来控制详细信息的显示与隐藏。 通过以上步骤，就可以实现鼠标悬停`v-for`元素展示详细信息的效果。用户只需要将鼠标悬停在某个元素上，就可以看到相应的详细信息。同时，当鼠标离开该元素时，详细信息也会自动隐藏。这样就能提供更多信息给用户，并且不会占用太多页面空间，大大提升了用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值