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


Posted in Vue.js onDecember 07, 2020

我就废话不多说了,大家还是直接看代码吧~

<template>
<!--此div的高度取屏幕可视区域的高度-->
 <div class="hello" :style="{'height':getClientHeight}">
  <h5>{{ msg }}</h5>

 </div>
</template>
<script>
export default {
 data() {
  return {
   msg: "Welcome to Your Vue.js App",
  };
 },
 computed: {
  getClientHeight:function () {
  //屏幕可视区域的高度
   let clientHeight = document.documentElement.clientHeight + "px"
   console.log("clientHeight 1=="+clientHeight)
   //窗口可视区域发生变化的时候执行
   window.onresize = () => {
    clientHeight = document.documentElement.clientHeight + "px"
    console.log("clientHeight changed2=="+clientHeight)
    return clientHeight
   }
   console.log("clientHeight 3=="+clientHeight)
   return clientHeight
  }
 }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
 width: 100%;
 background-color: #42b983;
}

</style>

补充知识:vue中动态style(如何动态修改伪元素样式)

vue中如何动态修改伪元素样式

vue项目中我们可以通过行内样式进行动态修改样式,大家都会就举栗子了

如何动态修改伪元素样式?

1.css中如何用变量

声明css变量的时候,变量名前面要加两根连词线(?)。

变量名大小写敏感,?header-color和?Header-Color是两个不同变量。

var()函数用于读取变量。

var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。

第二个参数不处理内部的逗号或空格,都视作参数的一部分。

<style>
body {
 --highlight-color: green;
}
.container {
 --highlight-color: red;
}
a {
 color: var( --highlight-color );
}
</style>
<body>
 <div class="container">
  <a href="">Link</a>
 </div>
</body>

2.根据css中使用变量的方法,我们可以结合vue中动态行内样式进行伪元素动态属性设置

<template>
  <div class="test">
    <span :style="spanStyle" class="span1">hello world</span>
    <br>
    <span :style="{'--width': widthVar}" class="span2">hello earth</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      spanStyle: {
        "--color": "red"
      },
      widthVar: "100px"
    };
  }
}
</script>
<style scoped>
  .span1 {
    color: var(--color);
  }
  .span2 {
    text-align: center;
    position: relative;
    width: var(--width);
  }
  .span2::after {
    content: '';
    display: block;
    position: absolute;
    left: 100%; 
    width: var(--width);
    height: var(--width);
    border-radius: 50%;
    border: 2px solid black;   
  }
</style>

以上这篇在vue中动态修改css其中一个属性值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
Vue如何清空对象
Mar 03 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
Vue router配置与使用分析讲解
Dec 24 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 #Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 #Vue.js
详解Vue中的自定义指令
Dec 07 #Vue.js
vue-router定义元信息meta操作
Dec 07 #Vue.js
Vue如何实现验证码输入交互
Dec 07 #Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 #Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 #Vue.js
You might like
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP的加密方式及原理
2012/06/14 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
python计算n的阶乘的方法代码
2019/10/25 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
计算机维护专业推荐信
2014/02/27 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
安全生产年活动总结
2014/08/29 职场文书
公证委托书格式
2014/09/13 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
2014年物流工作总结
2014/11/25 职场文书
实习生个人总结范文
2015/02/28 职场文书
2016新年致辞
2015/08/01 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS