vue.js - vue 基于多数据的动态 vlaue
问题描述
基于提到单个参数的大多数 vue 文档,我使用 v-on:mouseover 并根据每个项目颜色动态控制样式,因为我需要根据每个项目的颜色通过悬停来更改每个项目的颜色,尽管我使用了!important
风格不变
<li v-for="item in items" v-bind:key="item.id">
<a class="my-link"
v-on:mouseleave="mouseLeave(item)"
v-on:mouseover="mouseOver(item)">
{{ item.title }}
</a>
</li>
data() {
return {
items: [
{
id: 1,
title: "one",
color: "#ccc"
},
{
id: 2,
title: "two",
color: "#000"
},
{
id: 3,
title: "three",
color: "#c7c7c7"
}
]
}
},
methods: {
mouseOver: function(item){
this.$el.children[0].style.color = 'red !important';
},
mouseLeave: function(item){
this.$el.children[0].style.color = `${item.color} !important`;
}
}
解决方案
另一种不使用 mouseleave 和 mouseover 的方法,仅使用 CSS:
使用:style为其数据定义中的每个列表项应用主颜色。还要在父元素上添加class="list"
带有悬停效果颜色的类。最后class="list-item"
,它仅在悬停时从父级继承颜色。因此红色仅在悬停时继承:
<li v-for="item in items" v-bind:key="item.id" class="list" :style="{ color: item.color }">
<a class="list-item">
{{ item.title }}
</a>
</li>
<style scopped>
.list-item {
color: red;
}
.list-item:hover {
color: inherit !important;
}
</style>
现场示例:
new Vue({
el: '#app',
data: {
items: [
{
id: 1,
title: "one",
color: "red",
},
{
id: 2,
title: "two",
color: "green",
},
{
id: 3,
title: "three",
color: "blue",
}
]},
template: `
<div>
<li v-for="item in items" v-bind:key="item.id" class="list" :style="{ color: item.color }">
<a class="my-link list-item">
{{ item.title }}
</a>
</li>
</div>`
})
.list-item {
color: #ccc;
}
.list-item:hover {
color: inherit !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
推荐阅读
- javascript - 使用 POST 请求过滤 loadData
- c# - 实体框架的公用表表达式的替代方案
- spring-boot - 如何从配置中获取 Spring 数据 jpa 实体的模式名称
- linux - GDB:linux内置模块中的断点失败
- react-native - React Native 警告:RCTC 模块未导出
- python - 会话期间喂食时出现tensorflow inavlidargument错误
- ios - 在项目的 mvc 方法中做什么
- jsf - p: 对话框的文件下载错误
- sql-server - SSRS 报表服务器配置
- python - 从 CSV 文件中选择特定行