在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 20 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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中数组合并的两种方法及区别介绍
2012/09/14 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
图片自动更新(说明)
2006/10/02 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
小程序实现录音功能
2020/09/22 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
让Python更加充分的使用Sqlite3
2017/12/11 Python
python 文件查找及内容匹配方法
2018/10/25 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
历史学专业推荐信
2013/11/06 职场文书
给老师的道歉信
2014/01/11 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
家具促销活动方案
2014/02/16 职场文书
临床医学专业求职信
2014/08/08 职场文书
行风评议整改报告
2014/11/06 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang