vue项目点击元素后如何改变样式
作者：曹家小乐乐
这篇文章主要介绍了vue项目点击元素后如何改变样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目点击元素后改变样式
点击元素都改变其样式的步骤
示例：
想实现点击产品名称时其颜色变为蓝色：
点击前：
点击后样式改变：
使用步骤
1.在template显示的数据中添加单击事件和样式绑定：
代码如下（示例代码为uniapp）：
<view class="z-tr" v-for="(item,index) in productList" :key="item.id">
<view class="z-td">{{index + 1 }}</view>
<view class="z-td" :class="{'visited':isvisited==index}" @click="visitfun(index)">{{ item.productname }}</view>
<view class="z-td text-green">{{ item.successmessage }}</view>
<view class="z-td text-red">{{ item.faillmessage }}</view>
</view>2.data数据层：
代码如下（示例）：
注意：
isvisited：-1时候默认不选中任何元素。等于isvisited：0 默认选中第一个元素
data() {
return {
isvisited: -1,
}
}3.methods添加事件：
methods: {
visitfun(index){
this.isvisited=index;
},
}4.在style中设置想要改变的样式，这里就只是将字体设置成蓝色：
<style>
.visited{
color: blue;
}
</style>vue动态更改元素样式
在vue项目开发中，好多地方需要动态去改变元素的样式，例如：更改元素class名去更换元素的样式，或更改元素的style去更改元素样式。
元素的显示、隐藏、大小、颜色等，也可以配合vuex使用实现类似主题话的更改。
动态更改style
通过style取值为变量来实现动态控制样式的效果
<template>
<div :style="{background:yanse,width:kuai,height:gao+'px'}">
</div>
</template>
<script>
export default {
data(){
return{
yanse:"red",
kuai:"100px",
gao:100
}
}
}
</script>
<style>
</style>通过class名去更改元素样式
通过三目运算符来实现元素样式的切换
<template>
<div :class='state?"red":"blue"'>
</div>
</template>
<script>
export default {
data(){
return{
state:true,
}
}
}
</script>
<style>
.red{
width: 100px;
height: 100px;
background: red;
}
.blue{
width: 100px;
height: 100px;
background: blue;
}
</style>升级用法
我们项目开发中可能遇到用户自定义主题颜色的需求，我们可以通过vuex来实现全局颜色的更改，将颜色作为一个变量存储在vuex中，通过更改vuex变量的值，实现全局样式的更改。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。