精华内容
下载资源
问答
  • vue动态修改css样式
    千次阅读
    2022-03-20 17:27:27


    前言

    例如:项目中我们需要动态改变当前页面的样式


    一、要怎么做?

    示例:1.首先我们要拿到数据中背景图数据
    2.然后在你需要的添加背景图div出添加定义的style

    二、使用步骤

    1.首先,在data中要有样式数据

    代码如下(示例):

    data: {		
    	//动态背景图片
    	leftStyle: { background: "#AF7F3F" }
    }
    

    2.在computed中添加这段代码

    代码如下(示例):

    computed: {
        myStyle() {
          return { "--myStyle": this.leftStyle.background };
        }
     }
    

    3.在需要改变样式的地方添加

    <div class="choose_classify" >
    	<p v-cloak :style="myStyle" >{{v.text}}</p>
    </div>
    

    总结

    例如:以上就是今天要讲的内容,本文仅仅简单介绍了动态改变css样式的使用,经供参考

    更多相关内容
  • 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样式

    2021-12-08 21:44:21
    以下的code,可以动态修改 class, 以及 background-color,或显示/隐藏一个paragraph: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" ...

    以下的code,可以动态修改 class, 以及 background-color,或显示/隐藏一个paragraph:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue Basics</title>
        <link
          href="https://fonts.googleapis.com/css2?family=Jost:wght@400;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 Styling</h1>
        </header>
        <section id="assignment">
          <!-- 1) Fetch the user input and use it as a CSS class -->
          <!-- The entered class should be added to the below paragraph -->
          <input type="text" v-model="inputClass" />
    
          <!-- (available classes: "user1", "user2") -->
          <p :class="paraClasses">Style me!</p>
          <button @click="toggle">Toggle Paragraph</button>
          <!-- 2) Use the "visible" and "hidden" classes to show/ hide the above paragraph -->
          <!-- Clicking the button should toggle between the two options -->
    
          <!-- 3) Add dynamic inline styling to the below paragraph and let the user enter a background-color -->
          <input type="text" v-model="bgcolor" />
          <p :style="{backgroundColor:bgcolor}">Style me inline!</p>
        </section>
      </body>
    </html>
    

    Javascript:

    const app = Vue.createApp({
      data() {
        return {
          inputClass: "",
          vb: true,
          bgcolor: "",
        };
      },
      computed: {
        paraClasses() {
            return {
                user1: this.inputClass==='user1',
                user2: this.inputClass==='user2',
                visible: this.vb,
                hidden: !this.vb,
            }
        }
      },
      methods: {
        toggle() {
          this.vb = !this.vb;
        },
      },
    });
    app.mount("#assignment");
    
    * {
      box-sizing: border-box;
    }
    
    html {
      font-family: 'Jost', sans-serif;
    }
    
    body {
      margin: 0;
    }
    
    header {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
      margin: 3rem;
      border-radius: 10px;
      padding: 1rem;
      background-color: #1b995e;
      color: white;
      text-align: center;
    }
    
    #assignment {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
      margin: 3rem;
      border-radius: 10px;
      padding: 1rem;
      text-align: center;
    }
    
    #assignment h2 {
      font-size: 2rem;
      border-bottom: 4px solid #ccc;
      color: #1b995e;
      margin: 0 0 1rem 0;
    }
    
    p {
      font-size: 1.25rem;
      font-weight: bold;
      background-color: #8ddba4;
      padding: 0.5rem;
      color: #1f1f1f;
      border-radius: 25px;
    }
    
    #assignment input {
      font: inherit;
      border: 1px solid #ccc;
    }
    
    #assignment input:focus {
      outline: none;
      border-color: #1b995e;
      background-color: #d7fdeb;
    }
    
    #assignment button {
      font: inherit;
      cursor: pointer;
      border: 1px solid #ff0077;
      background-color: #ff0077;
      color: white;
      padding: 0.05rem 1rem;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
    }
    
    #assignment button:hover,
    #assignment button:active {
      background-color: #ec3169;
      border-color: #ec3169;
      box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
    }
    
    .user1 {
      background-color: blue;
      color: white;
    }
    
    .user2 {
      background-color: purple;
      color: white;
    }
    
    .hidden {
      display: none;
    }
    
    .visible {
      display: block;
    }
    
    
    展开全文
  • Vue 动态改变css

    千次阅读 2022-03-16 16:17:33
    两种方式动态改变css

    两种方式动态改变css

    目录

    两种方式动态改变css

    方式一:使用:class根据不同的条件切换css样式

    方式二:使用:style动态给css中某样式赋值


    方式一:使用:class根据不同的条件切换css样式

    template中:

    <span class="successOrError" :class="{success:isSuccess,error:!isSuccess}">成功</span>

    data中:

    data(){
        return{
            isSuccess:true
        }
    }

    css中:

    <style lang="scss" scoped>
        .successOrError {
        font-size:14px;
        &.success {
            color:green;
        }
        &.error{
            color:red;
        }
    }
    </style>

    方式二:使用:style动态给css中某样式赋值

    template中

    <span class="successOrError" :style="{'--font-color':"green"}">成功</span>

    css中

    <style lang="scss" scoped>
        .successOrError {
        font-size:14px;
        color:var(--font-color)
    }
    </style>

    展开全文
  • 在网页开发中,我们经常会遇到动态改变某个元素样式的需求,在vue里如何实现呢?官网上其实写的很详细了,对象语法,数组语法等。我自己总结了在开发中,个人用的比较多的三种方式1.class,三元表达式根据三元...
  • Vue 动态绑定CSS样式

    2021-04-14 15:55:02
    动态绑定CSS样式 绑定了changeColor样式,changeC是判断条件,根据条件changeC控制css加与不加 <div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC"> <span>示例一</span>...
  • vue动态修改css样式代码

    万次阅读 2019-09-06 18:43:13
    问题描述: 一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变...toast_tips 表示该元素的基础样式,写在css中,toast_tips_style表示附加样式,需要在js中动态写入 <div v-show="toast" class...
  • 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 js 改变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'
  • 因为我们难以使用行内属性来设置ElementUI组件内的div,比如说我们想要修改el-slider组件中的button大小一般都是使用css样式来进行设置。那么我们应该怎么做呢?
  • 当我们动态修改的值为正数的时候 <view :style="[{ 'margin-top':height + 'px'}]"> 将盒子向下移动 </view> 例子2 当我们动态修改的值为负数的时候 <view :style="[{ 'margin-top':'-'+ height...
  • Vue 动态修改dom样式

    万次阅读 2018-07-23 16:11:45
    修改dom样式的思路,无非就是两步: 获取dom 修改样式 一、 vm.$el 修改dom样式 获取dom节点 根节点,即被挂载的dom &amp;lt;div id=&quot;app&quot;&amp;gt; {{info}} &amp;lt;/div&...
  • vue动态渲染css样式

    2021-08-26 10:33:41
    vue2的,动态样式只能通过computed实现 <view :style="colors"> <view class="text"> test css </view> </view> //js data(){ return { color:'#84a555' } }, computed:{ colors...
  • 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class=...
  • 修改css不生效 使用 !important也不生效时 使用 /deep/ /deep/#qrcode{ width:200px; }
  • vue使用v-bind绑定style属性或class属性,动态修改CSS样式动态修改style,动态修改class。
  • 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....
  • 同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less)。相信好多做TOB的开发朋友都会选择顺手组件库。组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们...
  • vue文件 <el-table ref="myTable"> </el-table> <button @click="click"> 隐藏 </button> js文件 click() { this.$refs.myTable.$el.getElementsByClassName('el- table__header-wrapper...
  • VUE动态绑定Css样式、Style行内样式

    千次阅读 2020-08-15 14:42:20
    VUE动态绑定Css样式、Style样式 一、背景 这两天做的uniapp项目开发的时候遇到了动态css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue的样式问题,一直以来这一块自己也没有好好...
  • Vue.js 动态绑定CSS样式

    万次阅读 2018-07-30 15:54:23
    a c 代表CSS样式表里相应的样式名 b 代表true(启用此样式)/false(不启用此样式) html &lt;!--vue-app是根容器--&gt; &lt;div id="vue-app"&gt; &lt;input type="button...
  • vue动态设置css样式

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

    千次阅读 2022-01-20 17:48:43
    1.定义不同的颜色数组 colorList: ['#4cb352', '#5bc...2.html数据遍历-自定义element-走马灯高度+定义css变量-yf-border-color <div v-for="(item, index) in listData" :key="`${index}`" :class="`partCurri
  • vue动态修改组件样式

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

    千次阅读 2020-07-15 16:42:24
    this.$refs.ref对应得名字.style.height = h +‘px’;
  • 二、vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head>...
  • 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 属性 -- 颜色

    万次阅读 2018-10-29 22:56:56
    例如:在for循环中改变span 颜色 &lt;div id="app"&gt; &lt;div v-for="item in items"&gt; &lt;span :style="{'color':item.color}"&gt;item.name&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,944
精华内容 20,377
关键字:

vue动态修改css样式