精华内容
下载资源
问答
我要提问
  • 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>
    html html5
    更多相关内容

  • 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;
}
}

     实现结果：

     

    收起
    展开全文
    javascript

  • 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...
    收起
    px转rem js操作css

  • vue 中修改css样式不生效

     2021-08-16 14:00:20
    修改css不生效 使用 !important也不生效时 使用 /deep/ /deep/#qrcode{ width:200px; }
    收起
    html5 less

  • 在vue中动态修改css其中一个属性值操作

     2021-01-18 15:22:24
    我就废话不多说了，大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> <h5>{{ msg }} ... msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
    收起

  • vuejs实现标签选项卡动态更改css样式的方法

     2020-10-18 11:40:08
    主要介绍了vuejs实现标签选项卡-动态更改css样式的方法，代码分为html和js两部分,需要的朋友可以参考下
    收起

  • vue中改变css样式 利用ref

     千次阅读 2020-07-15 16:42:24
    this.$refs.ref对应得名字.style.height = h +‘px’;
    收起

  • vue、css修改滚动条样式

     2021-05-31 16:02:09
    vue、css修改滚动条样式 样式为 /* 滚动条 */ body *::-webkit-scrollbar { width: 10px; height: 10px; } body *::-webkit-scrollbar-track { background: #fff; border-radius: 2px; } body *::-webkit-...
    收起

  • Vue.js中对css的操作（修改）具体方式详解

     2020-10-17 19:34:40
    使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改；接下来通过本文给大家分享Vue.js中对css的操作（修改）具体方式，感兴趣的朋友跟随小编一起看看吧
    收起

  • vue中css样式管理

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

  • Vue打包部署到Nginx时,css样式不生效的解决方式

     2020-10-15 00:26:49
    主要介绍了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样式

     万次阅读 2017-12-06 11:17:03
    对于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组件样式修改无效的解决方法

     2020-08-28 02:12:02
    下面小编就为大家分享一篇vue中element组件样式修改无效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • vue 如何动态修改css样式（将data的值动态赋值，动态修改css样式）

     千次阅读 2021-05-07 12:27:21
    当我们动态修改的值为正数的时候 <view :style="[{ 'margin-top':height + 'px'}]"> 将盒子向下移动 </view> 例子2 当我们动态修改的值为负数的时候 <view :style="[{ 'margin-top':'-'+ height...
    收起

  • vue中通过点击事件修改css样式，两个按钮样式切换

     千次阅读 2021-09-01 13:12:35
    通过ref修改 <div class="sub" ref="abc" @click="submit()">确定</div> submit() { if (!this.password) {//我写的判断 this.$refs.abc.style.background = "#ccc"; } else { this.$refs.abc....
    收起
    javascript html

  • vue css样式修改穿透

     千次阅读 2020-04-28 14:47:07
    修改组件样式的时候可能没有效果 加个>>>样式穿透可能会好一些
    收起

  • 解决vue单页面修改样式无法覆盖问题

     2021-01-19 17:42:58
    标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。 vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。 比如： <style scoped&...
    收起

  • vue修改Element的el-table样式的4种方法

     2020-10-14 18:28:59
    主要介绍了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中css样式覆盖问题 vue中css样式作用域 vue.js样式不起作用

     千次阅读 2018-06-21 07:29:07
    项目前端使用vue.js和element-ui,由于想要对输入框进行验证，输入值非法时输入框颜色变红，就想要根据el-input编译 后的class进行修改，但是直接在html页面中调用class无效，在网上查资料后，发现把html中的<...
    收起

  • vue里面父组件修改子组件样式的方法

     2020-08-28 02:11:01
    下面小编就为大家分享一篇vue里面父组件修改子组件样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • vue中css样式的提取与引用

     2020-11-04 21:55:59
    在css的使用中，我们对一些常用、公共的css样式，可以单独提取出来，在用到地方再使用，可以保证一些公共的样式一致性、增强代码的维护性等。 1.新建css样式的文件 新建一个“对象内文本溢出时显示省略号”的样式：...
    收起

  • vue中改变滚动条样式的方法

     2020-10-15 14:16:52
    主要介绍了vue中改变滚动条样式的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    收起

  • vue动态改变当前样式(css)

     2022-03-20 17:27:27
    首先，在data中要有样式数据2.在computed中添加这段代码3.在需要改变样式的地方添加总结 前言 例如：项目中我们需要动态改变当前页面的样式 一、要怎么做？ 示例：1.首先我们要拿到数据中背景图数据 2.然后在你...
    收起
    前端

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,495
精华内容 15,398
热门标签
关键字：

vue修改css样式