精华内容
下载资源
问答
  • Vue · 对css样式修改
    2021-07-23 18:46:20

    方法一:

    html:

     <div class="videoMa" ref="videoMa" style="width:100%;height:100%;">
     	<div id="playWnd" class="playWnd"  :style="{width:videoBox.width+ 'px',height:videoBox.height+ 'px'}"></div>
     </div>
    

    data:

     videoBox:{
           width:800,
           height:500,
         }
    

    mounted中:

      mounted() {
          this.videoBox.width=this.$refs.videoMa.offsetWidth;
          this.videoBox.height=this.$refs.videoMa.offsetHeight;
     }
    

    方法二:

    <div id="vueFirst">
        <div :class="backColor">hello world</div>
        <hr>
        <input type="button" value="变黄" @click="changeColorToYellow"></input>
        <input type="button" value="变蓝" @click="changeColorToBlue"></input>
    </div>
    <script type="text/javascript">
    export default {
           data: {
               backColor: "blueBack"
           },
           methods: {
               changeColorToYellow() {
                   this.backColor = "yellowBack"
               },
               changeColorToBlue() {
                   this.backColor = "blueBack"
               }
           }
        }
    </script>
     <style>
     .blueBack {
         background-color: blue;
     }
    
     .yellowBack {
         background-color: yellow;
     }
    </style>
    
    更多相关内容
  • 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-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样式和添加CSS样式

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

    这里写图片描述

    calss语法格式=> :class=”{ ’ a ’ : f }”
    a表示添加的css样式,f 表执行条件,满足条件就添加写好的Css样式。用于添加Css样式

    style语法格式=> :style=”{ ’ Q ’ : R }”
    Q表示具体修改的Css样式,R表示修改的值。用于修改CSS某一个样式。

    展开全文
  • vue中动态修改css样式代码

    万次阅读 2019-09-06 18:43:13
    问题描述: 一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变...toast_tips 表示该元素的基础样式,写在css中,toast_tips_style表示附加样式,需要在js中动态写入 <div v-show="toast" class...
  • 修改css不生效 使用 !important也不生效时 使用 /deep/ /deep/#qrcode{ width:200px; }
  • 我就废话不多说了,大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> <h5>{{ msg }} ... msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
  • 主要介绍了vuejs实现标签选项卡-动态更改css样式的方法,代码分为html和js两部分,需要的朋友可以参考下
  • vue中改变css样式 利用ref

    千次阅读 2020-07-15 16:42:24
    this.$refs.ref对应得名字.style.height = h +‘px’;
  • vuecss修改滚动条样式 样式为 /* 滚动条 */ body *::-webkit-scrollbar { width: 10px; height: 10px; } body *::-webkit-scrollbar-track { background: #fff; border-radius: 2px; } body *::-webkit-...
  • 使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改;接下来通过本文给大家分享Vue.js中对css的操作(修改)具体方式,感兴趣的朋友跟随小编一起看看吧
  • vuecss样式管理

    万次阅读 2019-02-21 17:44:45
    在每个CSS选择器末尾(编译后生成的CSS)加一个当前组件的data属性选择器(如[data-v-7ba5bd90])来私有化样式。选择器末尾的data属性和其对应的DOM中的data属性相匹配 子组件的元素上有一个类已经在这个父组件中...
  • 主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 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'
  • 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式本人系前端小白,如有不对的地方轻喷,只是写自己总结下来的一些简单应用。 1.路由跳转的两种基本方式 2.动态修改class名 如果有不对的地方还请各位大牛指出。
  • vue.js弹窗插件css样式

    2020-03-05 15:24:13
    vue.js Dialog插件,支持页面挂载对象和按钮配置,博客有js代码和示例,可以按需求自行修改,链接地址:https://blog.csdn.net/weixin_40885323/article/details/104675450
  • vue 绑定属性设置css样式

    千次阅读 2019-07-23 17:52:31
  • 下面小编就为大家分享一篇vue中element组件样式修改无效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 当我们动态修改的值为正数的时候 <view :style="[{ 'margin-top':height + 'px'}]"> 将盒子向下移动 </view> 例子2 当我们动态修改的值为负数的时候 <view :style="[{ 'margin-top':'-'+ height...
  • 通过ref修改 <div class="sub" ref="abc" @click="submit()">确定</div> submit() { if (!this.password) {//我写的判断 this.$refs.abc.style.background = "#ccc"; } else { this.$refs.abc....
  • vue css样式修改穿透

    千次阅读 2020-04-28 14:47:07
    修改组件样式的时候可能没有效果 加个>>>样式穿透可能会好一些
  • 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。 vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。 比如: <style scoped&...
  • 主要介绍了vue修改Element的el-table样式的4种方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
  • vue中设置全局的css样式

    千次阅读 2021-01-13 20:06:40
    HBM内存介绍原帖地址:http://www.anandtech.com/show/9969/jedec-publishes-hbm2-specification The high-bandwidth memory ...Android源码剖析之Framework层基础版(窗口、linux、token、Binder)本文来自...
  • 项目前端使用vue.js和element-ui,由于想要对输入框进行验证,输入值非法时输入框颜色变红,就想要根据el-input编译 后的class进行修改,但是直接在html页面中调用class无效,在网上查资料后,发现把html中的<...
  • 下面小编就为大家分享一篇vue里面父组件修改子组件样式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在css的使用中,我们对一些常用、公共的css样式,可以单独提取出来,在用到地方再使用,可以保证一些公共的样式一致性、增强代码的维护性等。 1.新建css样式的文件 新建一个“对象内文本溢出时显示省略号”的样式:...
  • 主要介绍了vue中改变滚动条样式的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 首先,在data中要有样式数据2.在computed中添加这段代码3.在需要改变样式的地方添加总结 前言 例如:项目中我们需要动态改变当前页面的样式 一、要怎么做? 示例:1.首先我们要拿到数据中背景图数据 2.然后在你...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,495
精华内容 15,398
关键字:

vue修改css样式