精华内容
下载资源
问答
  • vue点击改变css样式
    千次阅读
    2022-04-13 09:47:26
                    <div ref="pcTips" class="pcTips">建议上传1920*450的图片</div>
    

    通过给标签添加一个实例,

    this.$refs.pcTips.style.cssText

     例如:this.$refs.pcTips.style.cssText = 'margin-left:0px'

    更多相关内容
  • 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>
    
    展开全文
  • 本人是前端的初学者,也在自学Vue.js,在自己编写系统的过程遇到的小问题,在这里分享给大家,若有什么不对的地方还请各位指正喔(づ ̄ 3 ̄)づ 一、效果 二、前端代码 这是静态页面代码部分(就两个简单的按钮...

            本人是前端的初学者,也在自学Vue.js,在自己编写系统的过程遇到的小问题,在这里分享给大家,若有什么不对的地方还请各位指正喔(づ ̄ 3 ̄)づ

    一、效果

    二、前端代码

    这是静态页面代码部分(就两个简单的按钮组件,绑定了两个事件)

    <template>
        <div class="test">
            <button @click="mgebtn" :class="{'Color':mgeColor}">按钮1</button>
            <button @click="pwdbtn" :class="{'Color':pwdColor}">按钮2</button>
        </div>
    </template>

    css样式的部分

    <style>
        button{
          padding: 20px;
          color: #555;
        }
        .Color{
          background-color: #ffd700;
          color: #fff;
        }
    </style>

    三、vue.js代码

            其实就是利用了vue.js的样式绑定的内容,mgeColor和pwdColor属性为true的时候,绑定的Color样式是执行的,反之mgeColor和pwdColor属性为false的时候绑定的Color样式是不执行的,所以点击按钮1触发mgebtn事件,将mgeColor和pwdColor默认值进行改变,以达到样式的改变,按钮2的绑定事件也是同理的。

    这是script部分的代码

    <script>
    export default {
      name: 'test',
      data () {
        return {
          mgeColor: true,
          pwdColor: false
        }
      },
      methods: {
        pwdbtn () {
          this.mgeColor = false
          this.pwdColor = true
        },
        mgebtn () {
          this.mgeColor = true
          this.pwdColor = false
        }
      }
    }
    </script>

    四、代码汇总

    以下是代码的汇总(~ ̄▽ ̄)~

    <template>
        <div class="test">
            <button @click="mgebtn" :class="{'Color':mgeColor}">按钮1</button>
            <button @click="pwdbtn" :class="{'Color':pwdColor}">按钮2</button>
        </div>
    </template>
    
    <script>
    export default {
      name: 'test',
      data () {
        return {
          mgeColor: true,
          pwdColor: false
        }
      },
      methods: {
        pwdbtn () {
          this.mgeColor = false
          this.pwdColor = true
        },
        mgebtn () {
          this.mgeColor = true
          this.pwdColor = false
        }
      }
    }
    </script>
    
    <style scoped>
        button{
          padding: 20px;
          color: #555;
        }
        .Color{
          background-color: #ffd700;
          color: #fff;
        }
    </style>
    

    以上就是本人所分享的内容啦(虽然有点简单(●ˇ∀ˇ●),但是肯定有些小萌新的),若有什么不对的地方还请各位大佬多多指正喔(づ ̄ 3 ̄)づ

     

    展开全文
  • vue动态改变css样式

    千次阅读 2022-02-11 14:37:17
    要求:切换按钮后改变css样式 实现思路:循环数组,然后添加点击事件,获取到当前点击的index 根据数组的下标去动态的改变样式。 <div class="cross-content"> <div class="cross-state"> <h3...

    要求:切换按钮后改变css的样式

    实现思路:循环数组,然后添加点击事件,获取到当前点击的index 根据数组的下标去动态的改变样式。

    <div class="cross-content">
              <div class="cross-state">
                  <h3>状态筛选</h3>
                  <span @click="checknow(index,'status')"  v-for="(item,index) in crossList" :key="index" :class="activeIndex === index ?'chose_type':'normal_type'" >{{item.name}}</span>
              </div>
              <div class="cross-state">
                <h3>分类筛选</h3>
                <span @click="checknow(index,'type')"  v-for="(item,index) in crossList" :key="index"  :class="activeIndexs === index ?'chose_type':'normal_type'">{{item.name}}</span>
              </div>
            </div>

     data中需要定义的数据信息

     activeIndex:0,//状态筛选的图片
     activeIndexs:0,//分类筛选的图片
    

    事件中方法的处理

      //todo 查看当前选中的时那个状态的value值
        checknow(index,info){
          // 2组不同的值循环尽量用同一个方法时要有区分因为你循环的是2次数组,不是嵌数组
          if(info === 'status'){
             this.activeIndex = index
          }
           if(info === 'type'){
             this.activeIndexs = index
          }
        },

    css样式

    .cross-state{
      padding: 1rem;
      font-size: .8rem;
      .sure{
        color: #ffffff;
      }
      h3{
        color: #333333;
        font-weight: 600;
      }
     .chose_type {
      width: 5.2rem;
      height: 2rem;
      text-align: center;
      line-height: 2rem;
      background: #42E5BA;
      border-radius: .2rem;
      color: white;
      display: inline-block;
      margin-top: 0.4rem;
      margin-left: .12rem;
    }
    .normal_type {
      width: 5.2rem;
      height: 2rem;
      text-align: center;
      line-height: 2rem;
      background: #F5F5F5;
      border-radius: .2rem;
      display: inline-block;
      margin-top: 0.4rem;
      color: #666666;
      font-size: .7rem;
      margin-left: .12rem;
    }
    }

     实现结果:

     

    展开全文
  • vue动态改变当前样式(css)

    千次阅读 2022-03-20 17:27:27
    例如:项目中我们需要动态改变当前页面的样式 一、要怎么做? 示例:1.首先我们要拿到数据中背景图数据 2.然后在你需要的添加背景图div出添加定义的style 二、使用步骤 1.首先,在data中要有样式数据 代码如下...
  • vue改变css样式 利用ref

    千次阅读 2020-07-15 16:42:24
    this.$refs.ref对应得名字.style.height = h +‘px’;
  • 在网页开发中,我们经常会遇到动态的改变某个元素样式的需求,在vue里如何实现呢?官网上其实写的很详细了,对象语法,数组语法等。我自己总结了在开发中,个人用的比较多的三种方式1.class,三元表达式根据三元...
  • Vue 动态改变css

    千次阅读 2022-03-16 16:17:33
    两种方式动态改变css
  • Vue · 对css样式修改

    千次阅读 2021-07-23 18:46:20
    style样式动态绑定 方法一: (1) html中: (2) data中: videoBox:{ width:800, height:500, } (3)mounted中: mounted() { this.videoBox.width=this.refs.videoMa.offsetWidth;this.videoBox.height=this....
  • 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...
  • 其次在点击修改(相当于按钮样式切换的笨方法) deviceEnableOrDisable(value) { if (value == 0) { this.$refs.abc.style.background = "#52c41a"; this.$refs.abc.style.color = "#fff"; this.$refs.abc1.style....
  • vue文件 <el-table ref="myTable"> </el-table> <button @click="click"> 隐藏 </button> js文件 click() { this.$refs.myTable.$el.getElementsByClassName('el- table__header-wrapper...
  • Vue: 动态修改CSS样式

    千次阅读 2021-12-08 21:44:21
    700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="styles.css" /> <script src="https://unpkg.com/vue@next" defer>script> <script src="app.js" defer>script> head> <body> <header> <h1>...
  • 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:...
  • 同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less)。相信好多做TOB的开发朋友都会选择顺手组件库。组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们...
  • 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.js实现动态更改css样式

    千次阅读 2021-03-22 15:35:05
    " :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通过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样式和添加CSS样式

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

    千次阅读 2020-12-23 05:33:12
    第一种把上面的scoped去掉优点: 修改简便缺点: 把scoped去掉了,就变成全局css了,可能会影响其他组件2. 第二种就是去 node_modules裡面把 element-ui 整包 CSS 给抓出来,然后放到自己指定的路径!这是 element-ui...
  • vue中引用组件导致css样式无法修改的解决方法
  • 但是在改变类名时,有时最好是有条件地应用样式。例如你有一个翻页的效果。翻页效果通常有一个高亮的效果,用于向用户显示当前页,这对于用户而言是很有帮助的。该项目的样式是有条件设置的,基于当前正在查看的页面...
  • Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可)第一步:在src目录下的main.js,也就是入口文件里面添加下面代码css-loader!less-loader!./common/less/index.less')在Vue1.0版本中可以这样写,但是2.0...
  • vue实现tab切换附带css样式 vue会用到tab切换的地方 很简单 几句代码实现可复用 直接上代码 我是写在html页面中的 1.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &...
  • (1)Normalize.css只是一个很小的css文件,但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset 、Normalize.css是一种现代的、为HTML5准备的优质替代方案。总之,Normalize.css是一种...
  • Vue中动态使用JavaScript修改CSS样式

    千次阅读 2022-06-27 21:46:40
    因为我们难以使用行内属性来设置ElementUI组件内的div,比如说我们想要修改el-slider组件中的button大小一般都是使用css样式来进行设置。那么我们应该怎么做呢?
  • 为什么要样式重置即 css reset ? 原因:不同的浏览器在实现w3c标准过程中,对各个元素的实现是不一致的。这就导致了同一个页面在不同的浏览器中比如ie和chrome中,表现有差异。为了解决这个问题,即不同浏览器中...
  • 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中动态修改css样式代码

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,597
精华内容 11,438
关键字:

vue点击改变css样式