-
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
目录
方式一:使用: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 动态改变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样式代码
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' -
Vue中动态使用JavaScript修改CSS样式
2022-06-27 21:46:40因为我们难以使用行内属性来设置ElementUI组件内的div,比如说我们想要修改el-slider组件中的button大小一般都是使用css样式来进行设置。那么我们应该怎么做呢? -
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 &lt;div id="app"&gt; {{info}} &lt;/div&... -
vue中动态渲染css样式
2021-08-26 10:33:41vue2的,动态样式只能通过computed实现 <view :style="colors"> <view class="text"> test css </view> </view> //js data(){ return { color:'#84a555' } }, computed:{ colors... -
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; } -
Vue 通过style属性、class属性来动态修改CSS样式
2022-07-11 14:56:10vue使用v-bind绑定style属性或class属性,动态修改CSS样式。动态修改style,动态修改class。 -
Vue · 对css样式修改
2021-07-23 18:46:20style样式动态绑定 方法一: (1) html中: (2) data中: videoBox:{ width:800, height:500, } (3)mounted中: mounted() { this.videoBox.width=this.refs.videoMa.offsetWidth;this.videoBox.height=this.... -
详解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:33vue文件 <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:20VUE动态绑定Css样式、Style样式 一、背景 这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue的样式问题,一直以来这一块自己也没有好好... -
Vue.js 动态绑定CSS样式
2018-07-30 15:54:23a c 代表CSS样式表里相应的样式名 b 代表true(启用此样式)/false(不启用此样式) html <!--vue-app是根容器--> <div id="vue-app"> <input type="button... -
vue中动态设置css的样式
2020-10-10 16:11:21前言: 在实际开发时,经常会遇到需要动态更换css样式的情况,比如今天自己在练习时遇到的一个简单的小问题,就是切换tab后动态的修改选中后的字体颜色,没有做成控件,就用a标签做的。 ... -
vue-动态设置css样式的hover
2022-01-20 17:48:431.定义不同的颜色数组 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:24this.$refs.ref对应得名字.style.height = h +‘px’; -
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:10vue动态点击切换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 颜色 <div id="app"> <div v-for="item in items"> <span :style="{'color':item.color}">item.name&...
收藏数
50,944
精华内容
20,377