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

  • 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.js css javascript

  • 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.js

  • 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.js css javascript

  • Vue 动态改变css样式的方法总结__Vue.js

     千次阅读 2020-12-19 13:03:36
    在网页开发中，我们经常会遇到动态的改变某个元素样式的需求，在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

  • vue中动态修改css样式代码

     万次阅读 2019-09-06 18:43:13
    问题描述： 一个脱离文档流的元素定位，要根据文档流中的特定元素的位置而改变...toast_tips 表示该元素的基础样式，写在css中，toast_tips_style表示附加样式，需要在js中动态写入 <div v-show="toast" class...
    收起
    px转rem js操作css js修改css样式

  • 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'
    收起
    vue.js

  • Vue中动态使用JavaScript修改CSS样式

     2022-06-27 21:46:40
    因为我们难以使用行内属性来设置ElementUI组件内的div，比如说我们想要修改el-slider组件中的button大小一般都是使用css样式来进行设置。那么我们应该怎么做呢?
    收起
    javascript css vue.js elementui

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

     千次阅读 2021-05-07 12:27:21
    当我们动态修改的值为正数的时候 <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 样式

  • 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...
    收起
    css javascript vue.js

  • Vue 框架之动态绑定 css 样式实例分析

     2020-12-10 14:35:45
    今天的小实例是关于 Vue 框架动态绑定 css 样式，这也是非常常用的一个部分 首先说一下 动态绑定，相对的大家都知道静态绑定，静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个 v-bing:class=...
    收起

  • vue 中修改css样式不生效

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

  • Vue 通过style属性、class属性来动态修改CSS样式

     2022-07-11 14:56:10
    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....
    收起
    html vue

  • 详解Vue中CSS样式穿透问题

     2020-12-09 08:55:00
    同时将webpack顺利从3升级到4（项目结构 webpack+vue+vue-store+vue-router+vant+less）。相信好多做TOB的开发朋友都会选择顺手组件库。组件库内置了很多样式，方便了我们开发者，同时又因高度封装，有时也会给我们...
    收起

  • Vue——在vue中，动态js改变css样式 (css 层叠模式)

     2021-12-25 10:01:33
    vue文件 <el-table ref="myTable"> </el-table> <button @click="click"> 隐藏 </button> js文件 click() { this.$refs.myTable.$el.getElementsByClassName('el- table__header-wrapper...
    收起
    vue.js javascript css

  • 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
    收起
    css vue.js javascript

  • vue中动态修改组件样式

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

  • vue中改变css样式 利用ref

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

  • Vue中引入样式文件的方法

     2020-12-03 03:24:52
    二、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

  • 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样式