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变量的值,实现全局样式的更改。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。