精华内容
下载资源
问答
  • vue实现点击动态添加class及删除同级class代码丑丑的写法,但是一看就能理解上面的意思参考链接 代码 html <template lang="html"> <div> <div @click="changeIndex(index)" v-for="(item,...

    vue实现点击后动态添加class及删除同级class

    在这里插入图片描述

    代码

    html

    <template lang="html">
      <div>
        <div
        @click="changeIndex(index)"
        v-for="(item,index) in arr"
        :class="{on:currentIndex===index}">
          {{item}}
        </div>
      </div>
    </template>
    

    js

    <script>
    export default {
      data(){
        return {
          arr:[
            "企业门户","企业定制","商城购物","微信公众号","机构院校"
          ],
          currentIndex:0
        }
      },
      methods:{
        changeIndex(index){
          this.currentIndex=index;
        }
      }
    }
    </script>
    

    css

    .on{
      color: red;
    }
    
    

    丑丑的写法,但是一看就能理解上面的意思

    html

     <div class="caseSelect">
             <div  @click="changeIndex(1)"  :class="{on:currentIndex===1}">企业门户</div>
             <div @click="changeIndex(2)"  :class="{on:currentIndex===2}">企业定制</div>
             <div @click="changeIndex(3)"  :class="{on:currentIndex===3}">商城购物</div>
             <div @click="changeIndex(4)"  :class="{on:currentIndex===4}">微信公众号</div>
             <div @click="changeIndex(5)"  :class="{on:currentIndex===5}">机构院校</div> 
     </div>
    

    methods

    changeIndex(index){
          this.currentIndex=index;
        }
    

    css

    .on{
      color: red;
    }
    
    

    参考链接

    感谢链接 也可以看下链接学习
    https://www.jianshu.com/p/37d427be0da3

    展开全文
  • 今天小编就为大家分享一篇vue实现点击追加选中样式效果,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue中v-for循环选中点击的元素并对该元素添加样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue: 动态添加样式

    千次阅读 2019-08-26 03:36:17
    vue如何操作html模版,使页面样式发生改变vue可以是使用两种方法使页面发生改变1. 动态改变class 使class增加、删除达到页面的改变2. 动态的操作style内联样式 ------------------------ 动态class------...
    vue如何操作html模版,使页面样式发生改变
    vue可以是使用两种方法使页面发生改变
    1. 动态改变class 使class增加、删除达到页面的改变
    2. 动态的操作style内联样式

    v2-641a0ecdce443eb088e57aade4e7558e_b.jpg

    ------------------------ 动态class-----------------------------

    显示或者隐藏

    需求1. 点击图片使isCircle取反
    需要2. 如果isCircle使false,就没有circle这个class

            <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>动态样式添加</title>
        <style>
     .shape{
     height: 100px;
     width: 100px;
     background-color: gray;
     display: inline-block;
     margin: 10px;
            }
     .circle{
     border-radius: 50%;
            }
     .blue{
     background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="shape" @click = "isCircle = !isCircle" :class = "{ circle : isCircle, blue : !isCircle }"></div>
     <!-- 刚才矛盾了,前面的class中circle没取消 -->
            <p>{{ isCircle }}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
     new Vue({
                el: "#app",
                data: {
                    isCircle: false,
                }
            })
        </script>
    </body>
    </html>
          

    v-bind:class 和 v-bind:style 由vue经过特殊处理,可以在后面写对象,对象中的键为属性,值为false则隐藏该属性,值为true为显示该属性

    :class 可以绑定多个类
    问题: 写多了class的html模版会使可读性很差
    解决: 我们可以把它定义在js下,但不能定义在data下,因为在data里不能获取data的数据(底层还没有绑定上),所以我们把它定义在计算属性下

            <div id="app">
        <div class="shape" @click = "isCircle = !isCircle" :class = "divClass"></div>
        <p>{{ isCircle }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
     new Vue({
         el: "#app",
         data: {
             isCircle: false,
         },
         computed: {
             divClass: function() {
                 return {
                     circle: this.isCircle,
                     blue: !this.isCircle,
                 }
              }
          }
    })
    </script>
          

    当它被点击发生true的东西,计算属性检测到它依赖的东西在发生改变,所有返回一个新的对象。


    改变类名

            <!-- css代码 -->
    <style>
        .shape{
            height: 100px;
            width: 100px;
            background-color: gray;
            display: inline-block;
            margin: 10px;
        }
        .circle{
            border-radius: 50%;
        }
        .blue{
            background-color: blue;
        }
        .red{
            background-color: red;
        }
    </style>
    
    
    
    
    
    <!-- html代码 -->
    <div id="app">
        <div class="shape" @click = "isCircle = !isCircle" :class = "color" ></div>
        <p>{{ isCircle }}</p>
        <input type="text" v-model = "color">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                isCircle: false,
                color: "blue"
                },
            computed: {
            divClass: function() {
                return {
                    circle: this.isCircle,
                    blue: !this.isCircle,
                }
            }
        }
    })
    </script>
          

    在div上绑定data的color属性,color属性的值为blue,所有class = blue这个类;

    我们添加一个input框,使v-model双向绑定data的color属性,所以当color属性改为red使,div的class也成red类

    v2-0d42798874f99f6537dcd79c51bac955_b.jpg

    有多个class类可以写成数组

    使用input来改动class类,使用点击来隐藏或显示类

            <!-- html代码 -->
    <div class="shape" @click = "isCircle = !isCircle" :class = "[color, {circle : isCircle}]" ></div>
    
    <!-- js代码 -->
    new Vue({
        el: "#app",
        data: {
            isCircle: false,
            color: "blue"
        },
    })
          

    v2-b068f860df6d815b44a7dfcc5c6d4c33_b.jpg


    --------------------------动态style-------------------------

    使用v-bind绑定style样式

    style样式是对象形式,但不能在属性中包含中划线,我们可以把它写成字符串或者驼峰式

            <!-- 包含在#app div中的html代码 -->
    <div class="shape" :style = "{ 'background-color':color }"></div>
    <!-- 字符串 -->
    <div class="shape" :style = "{ backgroundColor:color }"></div>
    <!-- 驼峰式 -->
          

    对象后面绑定的是data里的color的数据

             new Vue({
         el: "#app",
         data: {
             color: "blue"
         },
    })
    
          

    v2-17a1bbb5a1f4f56350ab92f8aa187b95_b.jpg

    双向数据绑定,改变color值

    可以直接在input框中输入想要的值

            <div class="shape" :style = "{ 'background-color':color }"></div>
    <input type="text" v-model = 'color'>
          

    v2-c91e36971b455ac7bc5922df6b54e1f4_b.jpg

    多个style属性

            <!-- html代码 -->
    <div class="shape" :style = "{ 'background-color':color, width:width + 'px' }"></div>
    <input type="text" v-model = 'color'>
    <input type="text" v-model = 'width'>
    
    <!-- js代码 -->
     new Vue({
         el: "#app",
         data: {
             isCircle: false,
             color: "blue",
             width: 200,
         },
     })
          

    v2-455b3de2733625b0f57c28cc8ec19a24_b.jpg

    问题: 有冗余,可读性不高

    解决方式: 使用计算属性

            <!-- html代码 -->
    <div class="shape" :style = "divStyle"></div>
    <input type="text" v-model = 'color'>
    <input type="text" v-model = 'width'>
    
    <!-- js代码 -->
    new Vue({
        el: "#app",
        data: {
            isCircle: false,
            color: "blue",
            width: 200,
        },
        computed: {
            divStyle: function() {
                return {
                    backgroundColor: this.color,
                    width: this.width + 'px'
                }
           }
        }
    })
          

    v2-2c85687864045f3df4ed20e0ba179822_b.jpg

    混合多个样式

            <!-- html代码 -->
    <div class="shape" :style = "[divStyle, {height: height + 'px'}]"></div>
    <input type="text" v-model = 'height'>
    
    <!-- js的Vue的#app控制的data代码 -->
    data: {
        isCircle: false,
        color: "blue",
        width: 200,
        height: 50,
    },
          

    展开全文
  • 今天小编就为大家分享一篇vue动态添加class类名的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 动态添加样式

    万次阅读 2018-06-15 14:51:02
    vue实现点击切换改变样式 html代码:根据数据动态循环一个列表 &lt;ul&gt; &lt;li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':...

    vue实现点击切换改变样式

    html代码:根据数据动态循环一个列表

    <ul>
        <li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':clicked==index}" @click="changeTab(index)">{{list}}</li>
    </ul>

    js代码:

    export default {
        data(){
            return{
                dataList:["选项1","选项2","选项3","选项4","选项5","选项6"],
                clicked:0   //标识,初始化默认选中第一项
            }
        },
        methods:{
            changeTab(index){
                this.clicked = index;
            }
        }
    }

    css样式,点击选中添加黑色边框

    .bor{
       border:2px solid black;
    }

    效果:
    这里写图片描述

    展开全文
  • } } 给定一个样式,三目判断,如果 定义的 activeClass 等于dxal (p标签的id) 那么就给定 active 样式 ,否则就为 空 再添加一个 类样式 :class="activeClass ==‘dxal’ ? ‘active’:’ ' css .active { border: ...

    一切都在代码里
    ps:说明一下,因为我这里没有使用 v-for 标签 ,循环,所以没有index 值,这里使用标签的id 值,代替 index

    准备工作

    html
    <div class="up1">
          <p  id="dxal" v-on:click="addStyleOrGetDate($event)" :class="activeClass =='dxal' ? 'active':''  "  >
               典型案例
          </p>
    </div>
    

    给P标签 一个 ID

    首先添加 一个点击事件 v-on:click="addStyleOrGetDate($event)"

    js
    //定义数据
    data: {
    //定义  activeClass   给默认值 0
          activeClass: "0",
     },
     //定义方法
     methods: {
    	addStyleOrGetDate(e){
    	//获取事件的ID 值   
    	//把ID 值 赋给  activeClass 
    	var onlyId=e.currentTarget.id;
             this.activeClass=onlyId;
         }
    }      
    

    给定一个样式,三目判断,如果 定义的 activeClass 等于dxal (p标签的id) 那么就给定 active 样式 ,否则就为 空
    再添加一个 类样式 :class="activeClass ==‘dxal’ ? ‘active’:’ '

    css
    .active {
          border: 1px solid #ffb422;
           color: #ffb422;
     }
    
    展开全文
  • vue点击按钮添加样式

    千次阅读 2020-12-21 18:08:45
    1、遍历的元素在点击添加样式 html <div class="midadd"> <template v-for="(item, index) in knowTypelist"> <div class="mid" :key="item.id" @click="change(index)" :class="{ active: ...
  • 如何利用VUE动态添加class样式

    千次阅读 2020-11-02 20:33:42
    -- 需求, 在每次点击li的时候, 当前的li添加class, 其余的li删除class --> <div id="app"> <ul> <!-- @click="getClass(index) 在每次点击li后调用getClass方法 --> <!-- :class="{'red...
  • <!DOCTYPE html> <... <head> ...Vue如何加class</title> <meta charset="utf-8"/> <style type="text/css"> .classred{ color:red; } </style&g...
  • 下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vue 测试实例 - vue实现列表增加和删除</title> [removed]...
  • Vue.js知识点总结 (动态添加样式)

    千次阅读 2020-04-24 22:14:16
    文章目录简单类名绑定通过v-model的方式改变类名多类名绑定通过输入样式名字改变颜色(1)多个样式绑定(2)计算属性的写法(3)数组形式的写法,添加了能改变高度的代码 简单类名绑定 先来看一个简单实例: <!...
  • 页面里 <div v-for="(item,index) in titles" v-bind:class="{active:index===isActive}" @click="checkActive(index)>{{item.title}}</div> 在data里,给默认值,进入页面默认展示 ...
  • 效果:点击导航项字体变颜色,底部添加横线 1.主要通过isActive来判断是哪一个导航页 2.还有一个问题是只要刷新页面都会跳转到首页,是因为标签a有跳转,要阻止a标签的默认跳转,href="javascript:void(0)这样也能实现 &...
  • Vue 点击li动态改变元素样式

    千次阅读 2020-09-17 11:49:18
    原本使用循环遍历清除样式再单独添加样式可以实现,但是总感觉会有更简洁的方式实现。今天找到了方法,故而小小记录一下。 template对应内容 <ul> <li class="siderBarItem" v-for="item in sideBarItems...
  • 关于vue选中按钮判断样式包括点击添加再点击去掉 <!-- 区域 --> <div class="size-box"> <div class="size-title fs-24 flex-center"> <span class="color-333 fs-24">{{currentArea....
  • <div class="newBtn"> <span @click="dayClick(index)" v-for="(item,index) in dayTab" :class="[idx === index ? 'active' : '']" ...
  • 主要介绍了vue.js实现点击动态添加class及删除同级class的相关资料,需要的朋友可以参考下
  • vue动态改变样式——点击事件:导航栏的经典写法 vue中数据的更新可以导致页面的重构,因此提供了一种导航栏的新思路。 <!-- 导航 --> template: <div class="nav_bar"> <span v-for="(item,i)...
  • 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实现点击追加选中样式。 1、DOM部分 2、JS部分 3、CSS样式部分 4、效果图 OK
  • //切换班级样式 changeStyle(index) { if(this.checkedGroup.indexOf(index) == -1) { this.checkedGroup.push(index); }else { var spliceIndex = this.checkedGroup.indexOf(index); this.checkedGroup....
  • VUE动态绑定Css样式、Style行内样式

    千次阅读 2020-08-15 14:42:20
    VUE动态绑定Css样式、Style样式 一、背景 这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue样式问题,一直以来这一块自己也没有好好...
  • vue中实现点击按钮添加样式 类似tab栏切换 <template> <div> <!-- 流程角色 --> {{ status }} <div class="role-content"> <div class="role-btn " @click="roleChecked0" :...
  • vue动态添加 li 被选样式

    千次阅读 2019-05-17 10:51:12
    css: ul li {cursor: pointer;} .blue {color: #2175bc;} ... (todo, index) in todos" v-on:click=... //获取点击对象 var el = event.currentTarget; alert("当前对象的内容:"+el.innerHTML); } } })
  • vue动态修改组件样式

    千次阅读 2020-07-07 18:18:24
    一般我们vue动态修改一个组件的样式会用 :class :style等方法。 今天我在修改一个组件样式的时候发现覆盖不了原有样式 于是我在style标签中用/deep/修改了一下,发现成功了,但是我必须要动态修改,那么怎么在css...
  • vue点击更改样式

    2020-09-15 15:48:30
    由于比较简单,就直接上代码: 前端代码 <span v-for="(item,index) in bottomText" :class="{clicked: index === ...vue代码 <script> export default{ data(){ return{ currentcheckIndex
  • 绑定class样式 怎么控制样式的显示 通过 class的控制 v:bind:class={class:index==变量} 下标和class变量是否相等控制true false 代码: (item,index) in arr' v-bind:class='{bg:index==isactive}' n@click='fn...
  • Vue给标签动态绑定样式class或者style

    千次阅读 2020-07-02 21:05:02
    我的项目中实际使用的是vue+element ui :class :class等同于 v-bind:class 借用Vue官网的解释: <div v-bind:class="[active: isActive ]"></div>...你可以在对象中传入更多字段来动态切换多

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,492
精华内容 9,396
关键字:

vue点击动态添加样式

vue 订阅