精华内容
下载资源
问答
  • 其次在点击修改(相当于按钮样式切换的笨方法) deviceEnableOrDisable(value) { if (value == 0) { this.$refs.abc.style.background = "#52c41a"; this.$refs.abc.style.color = "#fff"; this.$refs.abc1.style....

    通过ref修改

    <div class="sub" ref="abc" @click="submit()">确定</div>
    
      submit() {
          if (!this.password) {//我写的判断
            this.$refs.abc.style.background = "#ccc";
          } else {
            this.$refs.abc.style.background = "#07C160";
          }
        },
    

    有的时候通过值来判断修改

          <span
            :class="this.state==1?'active ':'active1'"
            @click="deviceEnableOrDisable(0)"
            ref="abc"
          >正常</span>
          <span
            :class="this.state==0?'active ':' active1'"
            style="margin-left:10px;"
            @click="deviceEnableOrDisable(1)"
            ref="abc1"
          >停用</span>
    
    
    默认state有值的情况下,有基础样式。其次在点击修改(相当于按钮样式切换的笨方法)
    deviceEnableOrDisable(value) {
      if (value == 0) {
        this.$refs.abc.style.background = "#52c41a";
        this.$refs.abc.style.color = "#fff";
        this.$refs.abc1.style.background = "transparent";
        this.$refs.abc1.style.color = "#1890ff";
      } else if (value == 1) {
        this.$refs.abc1.style.background = "#52c41a";
        this.$refs.abc1.style.color = "#fff";
        this.$refs.abc.style.background = "transparent";
        this.$refs.abc.style.color = "#1890ff";
      }
    },
    
    展开全文
  • 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动态点击切换css样式

    <template>
    	<div v-for="i in 5" 
             class="el-personal" 
             :class="{active:isActive==i}"
             @click="show(i)">
    		切换css样式
    	</div>
    </template>
    <script>
        export default {
        	data() {
    				return {
    					isActive: 0,
    				}
    			},
        	  methods: {
          		show(i) {
    				this.isActive = i
    				}
          		}
        	}
    </script>
    <style lang="scss" scoped>
        .el-personal{
            width:100px;
            height:100px;
            background:red;
        }
        .active{
            background:blue;
        }
    </style>
    
    展开全文
  • 同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less)。相信好多做TOB的开发朋友都会选择顺手组件库。组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们...
  • 效果

    效果

     

     

    展开全文
  • 主要介绍了vue改变滚动条样式的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue改变css样式 利用ref

    千次阅读 2020-07-15 16:42:24
    this.$refs.ref对应得名字.style.height = h +‘px’;
    • this.$refs.ref对应得名字.style.height = h +‘px’;
    展开全文
  • vue通过data值改变css样式

    千次阅读 2020-08-18 11:20:01
    centerActive为class样式名,满足后面的条件时则class为centerActive 2. frame-item-active 和frame-item为class名,满足条件为frame-item-active ,不满足则为frame-item 3. active-btn 和 all-btn为class...
  • vue中动态修改css样式代码

    万次阅读 2019-09-06 18:43:13
    一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变,而该特定元素的位置又是不固定的,这个时候css代码就不能直接写,需求如下: 解决方案: 先给弹窗写基础样式,定位信息可以不写 toast_tips ...
  • VUE的click事件:动态设置div的样式

    千次阅读 2020-07-28 17:21:48
    需求:点击层与非点击层的样式不一样 1 1、点击层与非点击层的不同样式: 2、给div添加点击事件 拓展:相同效果的另一种写法 注意比较两种写法的不同,各种滋味自己体会
  • vue中动态设置css样式

    千次阅读 2020-10-10 16:11:21
    前言: 在实际开发时,经常会遇到需要动态更换css样式的情况,比如今天自己在练习时遇到的一个简单的小问题,就是切换tab后动态的修改选中后的字体颜色,没有做成控件,就用a标签做的。 ...
  • vue根据不同值改变css样式

    千次阅读 2019-01-14 14:27:05
    当值不固定时,同时改变css样式 原文:http://www.cnblogs.com/can-dy/p/7364760.html &lt;div class="rack" v-for = "(item,idx) in items" :key="idx" :class = "...
  • vue点击按钮改变div样式

    千次阅读 2021-04-14 17:20:43
    如何点击按钮触发事件改变div的颜色(样式) 方法: 通过三目运算符判断选择那个样式: 代码: <!doctype html> <html> <head> <title>div点击按钮改变样式</title> <meta ...
  • Style的样式绑定 第一种::style="{ color: activeColor, fontSize: fontSize + 'px' }" 其中activeColor/fontSize 是data 属性 第二种::style="{ color, fontSize }" ...CSS样式绑定 1) c...
  • " :class="{'active':idx == index}">{{item.name}}a> li> ul> Javascript代码: var app = new Vue({ el:"#app", router, data:{ m:"hello vue.js", active:'2', idx:'0', //默认选择首页 headerList:[ ...
  • vue 绑定属性设置css样式

    千次阅读 2019-07-23 17:52:31
  • vue中修改css样式和添加CSS样式

    万次阅读 2018-09-04 10:32:39
    a表示添加的css样式,f 表执行条件,满足条件就添加写好的Css样式。用于添加Css样式 style语法格式=&amp;amp;amp;gt; :style=”{ ’ Q ’ : R }” Q表示具体修改的Css样式,R表示修改的值。用于修改CSS某一个...
  • vuecss样式管理

    万次阅读 2019-02-21 17:44:45
    在每个CSS选择器末尾(编译后生成的CSS)加一个当前组件的data属性选择器(如[data-v-7ba5bd90])来私有化样式。选择器末尾的data属性和其对应的DOM中的data属性相匹配 子组件的元素上有一个类已经在这个父组件中...
  • vue切换css样式

    2021-04-29 15:45:48
    vue通过点击控制多个元素的css样式 <div class="hide-class" v-for="(item,index) in list" :class="{'activeClass': rSelect.indexOf(item)!=-1}" @click="showdifference(item,index)" > &...
  • 解决VUE下动态改变CSS样式不生效

    万次阅读 2017-07-25 10:19:00
     可以实现动态改变CSS样式,但是发现不刷新的话CSS样式不改变,但是lot方法是在跑的  解决办法是: 在父组件中删除与子组件中同名的css类名 (按理说我在组件中写的css都是scoped,不应该影响组件间的,但是...
  • 方法一 v-if判断后用标签改变样式(特定显示列字体加粗) (col,i) in cols'> <v><b>{{col.text}}</b></v> <v class='align-end mystyle'><b>{{item[col['value']]}} </v-list-i
  • vue中这样控制css样式更slay

    千次阅读 热门讨论 2020-06-14 23:21:08
    我们在使用很多 app 时,可能都会发现,当执行某一操作后,页面样式会随着操作而变化,这就是动态加载css,如何实现?
  • Vue.js动态改变样式

    千次阅读 2021-07-27 14:11:45
    虽然我们不能用js直接操作css样式表,但是我们可以控制元素的样式属性嘛,class和style都是属性值,看起来有搞头呀,话不多说,开始了!!! 控制style样式 1.使用样式对象 html代码 <div id="app"> <
  • 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...
  • vue-改变body的css样式

    千次阅读 2020-12-01 20:25:47
    vue-改变body的css样式 beforeCreate() { document.querySelector('body').setAttribute('style', 'background-color:#f4f4f4; color:#666666;') }, beforeDestroy() { document.body.removeAttribute('style') ...
  • 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改变滚动条样式CSS

    万次阅读 多人点赞 2020-02-11 16:52:34
    改变滚动条的样式,让浏览器的滚动轴变细。这篇博客给出了完整的代码实现。
  • 我就废话不多说了,大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> <h5>{{ msg }} ... msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
  • 废话不多说直接看代码 height 为动态传入的值(通过data获取) 例子1: 当我们动态修改的值为正数的时候 <view :style="[{ 'margin-top':height + 'px'}]"> 将盒子向下移动 </view>...
  • Vue 点击li动态改变元素样式

    千次阅读 2020-09-17 11:49:18
    为了实现点击侧边栏中一项,改变当前选中项的背景图片效果。原本使用循环遍历清除样式再单独添加样式可以实现,但是总感觉会有更简洁的方式实现。今天找到了方法,故而小小记录一下。 template对应内容 <ul> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,601
精华内容 9,040
关键字:

vue点击事件改变css样式

vue 订阅