在VUE style中使用data中的变量的方法

最近项目中的公共组件，在复用的时候，针对不同的场景，需要不断变更CSS里样式的值，而且已经有了全局的公共组件样式了

如果用vue传统的动态绑定class和style的方式去修改样式（文末会提到），需要额外写很多变量和模块class，那如果我的样式的值，可以从父组件，传到子组件，子组件根据传入值去渲染对应样式的值，其实就是要再style中使用data和props中的变量，这要怎么做呢？

其实很简单，只需要三步，大家来看：

1、HTML结构

<Upload

   ref="upload"

   :show-upload-list="false"

   :before-upload="handleBeforeUpload"

   :disabled="disabled"

   :max-size="maxSize"

   action
>

2、作用区域范围内设置“CSS变量”

<style lang="less" scoped>
.info-img-wrap {

 --textAlignPosition: center;

 /deep/ .ivu-upload {

  text-align: var(--textAlignPosition);

 }

}
<style/>

3、在JS中通过setProperty()方法修改“--textAlignPosition”的值，从而间接改变对应子元素的（text-align）文本对齐方式

mounted() {

   this.$nextTick(function () {

    this.$refs.upload.$el.style.setProperty(

     '--textAlignPosition',

     this.textAlign

    );

   });

}

这要就完成了。

下面再复习一下vue中修改样式还有另外两种方法，1是动态修改class，2是动态修改style

1、vue中可以通过对象语法和数组语法来修改class

对象语法

html

<div v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></div>

js

data: {

 isActive: false,

 hasError: true

}

数组语法

html

<div v-bind:class="\[isActive ? activeClass : '', errorClass\]"></div>

js

data: {

 isActive: false,

 hasError: true,

 activeClass: 'active',

 errorClass: 'text-danger'
}

只需要动态改变isActive和hasError的值，就可以实现div的绑定不同的class和去掉绑定

2、vue中可以通过对象语法和数组语法来修改style

对象语法

html

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

js

data: {

 activeColor: 'red',

 fontSize: 30

}

数组语法

html

<div v-bind:style="\[styleColor, styleSize\]"></div>

js

data: {

 styleColor: {

   color: 'red'

  },

 styleSize:{

   fontSize:'23px'

 }

}

只要改变data中的变量styleColor和styleSize，就可以动态修改div的style了。

到此这篇关于在VUE style中使用data中的变量的方法的文章就介绍到这了,更多相关VUE style使用data变量内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue单文件组件lint error自动fix与styleLint报错自动fix详解

    问题描述 之前用Vue(多入口打包成多页)的项目,要修改迁移并修改为一个单页应用,且使用Vue脚手架生成项目,要对js,vue,css文件的代码做lint,在修改Webpack配置后第一次跑lint居然报了几万个Error,且是在eslint加了--fix选项的情况下,且错误大多集中在顺序问题上也就是vue/order-in-components和order/properties-order的错误.以下是问题的解决方式及过程记录. stylelint中css属性顺序错误 .stylelint的配

  • 浅谈vue中慎用style的scoped属性

    在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为在我们需要修改公共组件(三方库或者项目定制的组件)的样式的时候,scoped往往会造成更多的困难,需要增加额外的复杂度. scoped实现私有化样式的原理 为什么会说,会增加复杂度?那么我们先从的实现模块的原理说起.为了方便称呼,我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件. 通过查看DO

  • vue.js入门教程之绑定class和style样式

    一.前言 相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 二.绑定 HTML Class 请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}&quo

  • 解决Vue编译时写在style中的路径问题

    解决Vue编译时写在style中的路径问题

    写在vue文件里面的style样式,在添加例如背景图片的时候,如果用的是相对路径,那么build出来的css文件的路径将会出错,导致找不到图片. 通过查找资料,在https://segmentfault.com/q/1010000008438061有人的回答解决了问题. 要修改主要有两个,一个就是config/index.js文件,将assetsPublicPath的路径改为'./',这是发布路径,如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器,可以在这里进行设置设置之后构建的产品

  • vuejs绑定class和style样式

    绑定Html Class 我们可以传给 v-bind:class 一个对象,以动态地切换 class.注意 v-bind:class 指令可以与普通的 class 特性共存: <div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div> data: { isA: true, isB: false} 渲染结果: <div class="s

  • 学习vue.js中class与style绑定

    关于vue.js中class与style绑定的练习代码,分享给大家,供大家参考: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs中Class与Style 绑定</title> <link rel="stylesheet" href="css/vu

  • vue的style绑定background-image的方式和其他变量数据的区别详解

    问题:使用vue加载图片变量,为了图片的自适应,需设置为背景图居中排布 <tr v-for="(item,index) in dataObj"> <td class="video-msg" v-bind:id="item.videoid"> <div class="videoImg fl" v-bind:style="{backgroundImage:'url(' + item.vide

  • vue绑定class与行间样式style详解

    一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { background: #000; /*background: green;*/ } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { red_color : 'red', bg_color : 'b

  • Vue的Class与Style绑定的方法

    本文介绍了Vue的Class与Style绑定,分享给大家,具体如下: 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <style> .exp{ border: 1px solid #ccc; } .forExp{ background: blue; } </style> <div class="exp" v-bind:class="{newExp:isNewExp}"

  • 在VUE style中使用data中的变量的方法

    最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更CSS里样式的值,而且已经有了全局的公共组件样式了 如果用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要额外写很多变量和模块class,那如果我的样式的值,可以从父组件,传到子组件,子组件根据传入值去渲染对应样式的值,其实就是要再style中使用data和props中的变量,这要怎么做呢? 其实很简单,只需要三步,大家来看: 1.HTML结构 <Upload ref="upload"

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

  • PowerShell中定义多行字符串变量的方法

    本文介绍PowerShell中如何定义一个跨多行的字符串变量,定义多行字符串时使用@"开始,使用"@结束. 有没有遇到这样一种情况,我们想创建一个变量来保存一个跨行的字符串. 是不是对怎么输入很头疼啊?其它编程语言有没有办法我不知道,但在PowerShell中,有一个很简单的办法,那就是使用@字符. 举例如下: 复制代码 代码如下: $str = @" 字符串的第1行 字符串的第2行 -- 字符串的第n行 "@ 注意在"@""之后,不要

  • 微信小程序开发之改变data中数组或对象的某一属性值

    前言:在小程序的开发中,我们在view中便利data中数组或对象时,很多情况下需要在js中动态改变数组或者对象中某一香的属性值. 效果图: 我给大家总结了案例如下: wxml如下: <scroll-view class='hd-cont' scroll-x="true" style='width: 100%'> <view wx:for="{{sDate}}" wx:key="{{index}}" class='date-con

  • vue 中自定义指令改变data中的值

    通过局部自定义指令实现了一个拖动的指令 html: <div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div> script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(e

  • Vue组件中的data必须是一个function的原因浅析

    组件可以有自己的data,并且data必须是一个function. 在下面这个例子中,data 返回了一个在外部定义的对象.并且这个组件在页面中使用了3次,点击+1时出现了如下情况:data中的count属性影响到了所有实例. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="

  • vue 实现根据data中的属性值来设置不同的样式

    style动态赋值 margin-top的值 根据choosePaperFlag的值来设置 利用三元表达式 补充知识:vue 条件判断绑定内联样式 当需要判断条件来绑定内联样式时 可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verification ? '{backgruond:#ccc}' : $store.state.store.config.background" 以上这篇vu

  • vue中如何给data里面的变量增加属性

    vue中如何给data里面的变量增加属性

    目录 给data里面的变量增加属性 vue框架是使用mvvm模式 我废话不多说直接上方法了 给data中的响应式对象动态添加属性 给data里面的变量增加属性 vue框架是使用mvvm模式 里面有一种通知机制 如果数据发生了变化 就会通过 视图进行更新 那是不是这样呢 我们只要把vue中data中的值发生变化dom树就会随时更新呢 <div id="app">             <ul>                 <li v-for="

  • Vue如何在CSS中使用data定义的数据浅析

    Vue如何在CSS中使用data定义的数据浅析

    1.考虑一个问题, 后端传来一个数据, 比如是某个百分比, 需要在页面做进度展示. 一般的情况都会在 CSS 中设置数据展示, 但是 CSS 中如何获取到后端传来的数据呢? 2.使用自定义属性: data- 通过 v-bind 将后端的数据绑定在自定义 HTML 属性上, 然后通过 CSS 的 attr() 函数获取该属性 <template> <div> <div class="box" :data-content="obj.desc"

  • vue data中的return使用方法示例

    vue data中的return使用方法示例

    目录 一.vue 里面的data return 是什么? 二.如何使用 1.vue 双向绑定 v-model 2.带有 ":"的属性 比如:class.:id等等 3. 标签使用return里面的属性 补充:vue中的data为什么会使用return函数 总结 一.vue 里面的data return 是什么? uniapp项目 vue 结构中data 里面的return详解 从字面上理解 data 是数据的意思 return是返回的意思,我个人理解的是 将数据返回出去. 二.如何使用

随机推荐