精华内容
下载资源
问答
  • vue点击事件改变样式
    千次阅读
    2022-02-16 13:24:34

    点击全部 切换样式

    在这里插入图片描述
    给一个click点击事件,动态样式绑定两个class(vue官网:绑定class的对象语法)

    <view class="type round-15" @click="whole" :class="{type:ys1,type_tips:ys2}">全部</view>
    

    用true和false判断

    ys1:true,
    ys2:false,
    

    方法:

    whole(){
    	// 当点击第一次时,ys1从true变为false,Style样式type就会隐藏
    	// 再点击第二次的时候由false,变为true,显示样式
    	// !为取反
    	this.ys1 = !this.ys1
    	this.ys2 = !this.ys2
    },
    
    <style>
    	.type{
    	  background: #f0f0f0;
    	  color: #7c7c7c;
    	}
    	.type_tips{
    	  background: #17a4fc;
    	  color: #fff;	
    	}
    </style>
    
    更多相关内容
  • 今天小编就为大家分享一篇Vue2.0点击切换类名改变样式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 为按钮设置点击事件 获取到按钮点击事件以后,判断index,进而动态修改按钮的class 2. 代码实现 2.1 代码 <template> <div class="btnGroup"> (item, index) in listData" :key="index" @click="changeColor(index)...

    1. 实现思路

    1. 为每个按钮设置一个index;
    2. 为按钮设置点击事件
    3. 获取到按钮点击事件以后,判断index,进而动态修改按钮的class

    2. 代码实现

    2.1 代码
    <template>
      <div class="btnGroup">
        <button
          v-for="(item, index) in listData"
          :key="index"
          @click="changeColor(index)"
          :class="activeIndex === index ? 'active' : ''"
        >
          {{ item }}
        </button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          listData: ["Button1", "Button2", "Button3", "Button4", "Button5"],
          // 标记被选中的按钮的index
          activeIndex: null,
        };
      },
      methods: {
        changeColor(index) {
            this.activeIndex = index;
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    .btnGroup {
      width: 500px;
      height: 100px;
      button {
        width: 15%;
        height: 35%;
        margin: 20px 0 20px 20px;
        background-color: pink;
        border: 1px solid skyblue;
      }
    
      // 被选中的按钮的样式
      .active {
        background-color: antiquewhite;
      }
    }
    </style>
    
    2.2 实现效果

    在这里插入图片描述

    展开全文
  • vue项目点击元素后改变样式

    千次阅读 2021-04-15 10:02:10
    1.在template显示的数据中添加单击事件样式绑定: 代码如下(示例代码为uniapp): <view class="z-tr" v-for="(item,index) in productList" :key="item.id"> <view class="z-td">{{index + 1 }}&...

    一、点击元素都改变其样式的步骤

    示例:想实现点击产品名称时其颜色变为蓝色:
    点击前:
    在这里插入图片描述
    点击后样式改变:
    在这里插入图片描述

    二、使用步骤

    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入门的小练习

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .active{
                color: red;
            }
        </style>
    </head>
    <body>
    
    <div id="app">
        <h1>{{message}}</h1>
    <!--点击哪个文本那个文本的样式发生改变
         v-for:用户遍历数组,并获取其数组元素的下标
         :class:记录当前文本的样式改变
         @click:点击事件-->
        <ul>
            <li v-for="(m,index) in list"
                :class="{active:currentIndex === index}"
                @click="liClick(index)">{{index}}.{{m}}</li>
        </ul>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:"hello!",
                list:['lihaihai','linjinyun','zzzzz'],
                currentIndex:0    //当前文本
            },
            methods:{
                liClick(index){      //点击事件--根据将所点击的元素下标index赋值currentIndex来改变所点击文本的样式的改变
                    this.currentIndex=index
                }
            }
        })
    </script>
    
    </body>
    </html>

    实现的结果显示:

     

     

     

     

    展开全文
  • vue点击时动态改变样式

    万次阅读 2018-11-07 19:09:35
    vue点击时动态改变样式 template中 &lt;li :class="{ active:index==isActive }" @click="changeValue(index)" v-for="( item , index ) in items" :key="item.CategoryId...
  • N个模板,单选,选中的改变样式(青色的边框) HTML代码: <ul class="templates-style"> <li class="filter-nav" v-for="(item, index) in touristList" :key="index" :class="{active:(clickIndex ...
  • vue点击当前元素改变样式 template中: data中: methods中:
  • <script> const app = new Vue({ el:'#app', data:{ message:'你好啊', movies:['海王','海尔兄弟','火影忍者','海贼王','进击的巨人'], currentIndex:0 }, methods:{ liClick(index){ this.currentIndex=index;...
  • vue中动态改变样式——点击事件:导航栏的经典写法 vue中数据的更新可以导致页面的重构,因此提供了一种导航栏的新思路。 <!-- 导航 --> template: <div class="nav_bar"> <span v-for="(item,i)...
  • 其次在点击修改(相当于按钮样式切换的笨方法) deviceEnableOrDisable(value) { if (value == 0) { this.$refs.abc.style.background = "#52c41a"; this.$refs.abc.style.color = "#fff"; this.$refs.abc1.style....
  • vue 点击选中改变样式

    2021-05-20 10:02:44
    data里 isActive:-1, method里 checkedItem(index){ this.isActive=index; }, 页面里 <div v-for="(item,index) in nameoptions" v-bind:class="{active:index==isActive}" @click="checkItem(index)>...
  • vue动态改变元素样式详解

    千次阅读 2022-06-16 00:30:41
    vue设置样式变量,以在vue中动态改变元素样式,包含动态改变class以及内联样式style等。实现vue动态控制页面样式
  • vue实现列表点击动态改变样式 一、实现原理 v-for进行列表循环 v-bind动态绑定 二、实现 1.v-for循环列表 data(){ return{ currentIndex:0, } } <ul> <li class="showplace-left-content" v-...
  • vue实现多选改变样式

    2021-03-10 10:03:45
    vue实现多选改变样式(自己写个小笔记) 欢迎使用Markdown编辑器 直接上代码 // 主要是绑定:class <el-tag :key="tag" v-for="(tag, index) in selectTags" @click="multipleSelect(tag, index)" :class="{ ...
  • vue点击切换css样式

    千次阅读 2021-04-01 18:11:10
    vue动态点击切换css样式 <template> <div v-for="i in 5" class="el-personal" :class="{active:isActive==i}" @click="show(i)"> 切换css样式 </div> </template> <script>...
  • vue改变样式

    2021-04-29 23:27:25
    传统的class=“样式”,通过v-bind:class="{样式:布尔值}"(布尔值=true显示反,false不显示),再通过将布尔值设置成vue中的属性值就可以实现动态绑定了。 例子如下: <!DOCTYPE html> <html lang="en">...
  • 本人是前端的初学者,也在自学Vue.js,在自己编写系统的过程遇到的小问题,在这里分享给大家,若有什么不对的地方还请各位指正喔(づ ̄ 3 ̄)づ 一、效果 二、前端代码 这是静态页面代码部分(就两个简单的按钮...
  • Vue 实现改变当前点击Class 样式改变多个点击Class样式 实例 解析 文章概览 1:改变当前点击class 样式 2:改变多个点击class 样式 一、改变当前点击Class样式 实现思路::class 动态判断样式 实例 ...
  • vue点击按钮改变div样式

    千次阅读 2021-04-14 17:20:43
    目标: 如何点击按钮触发事件,改变div的颜色(样式) ...div点击按钮改变样式</title> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/vue"></script
  • 主要介绍了Vue点击切换Class变化,实现Active当前样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue点击文字样式

    2022-03-30 16:12:15
    {{item.name}} 主要是动态添加 class 样式 和 更改图片css3样式 图片由外部引入后,循环 这里data中要定义一个初始值 actindex :0, 点击事件 tabChange(index) { this.actindex = index; }, 动态添加的样式 图片...
  • Vue动态改变样式实战

    千次阅读 2020-08-30 10:24:14
    一点睛 1通过给html元素的 class属性绑定...二vue动态改变样式 1代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue动态改变样式</title> <s...
  • Vue点击时动态改变样式

    千次阅读 2019-08-27 11:18:54
    1.vue点击时动态改变样式(静态页面写死) <template> <div> <!-- 流程角色 --> <div class="flow-role"> <div class="role-title title-style">流程角色</div> ...
  • vue动态改变css样式

    千次阅读 2022-02-11 14:37:17
    实现思路:循环数组,然后添加点击事件,获取到当前点击的index 根据数组的下标去动态的改变样式。 <div class="cross-content"> <div class="cross-state"> <h3>状态筛选</h3> <...
  • 鼠标事件通过class改变样式,即鼠标移上去和移开时,元素的样式不同。 ①首先,添加鼠标事件: @mouseover="mouseOver($event)" @mouseleave="mouseLeave($event)" ②实现这两个方法: mouseOver ($event) { $...
  • vue 点击当前元素改变样式

    千次阅读 2019-07-11 13:52:00
    template <ul> <li v-for="(relation,index) in relations" v-bind:id="relation.id" v-bind:id="relation.id" v-bind:class="{checked:index==nowIndex}" v-on:click="relationClick(index)...
  • vue 实现点击元素 改变该元素样式点击过的元素,样式不移除 在写项目时 一般的需求都是点击当前元素 改变该元素样式 点击下一个元素 其余元素样式恢复原状,但最近遇到一个需求是,点击元素 改变该元素字体颜色 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,084
精华内容 8,433
关键字:

vue点击事件改变样式