vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue项目点击元素后改变样式

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变量的值,实现全局样式的更改。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文