在vue中动态修改css其中一个属性值操作
版权申诉
58 浏览量
2021-01-18
15:22:24
上传
评论
收藏 42KB PDF 举报
在在vue中动态修改中动态修改css其中一个属性值操作其中一个属性值操作
我就废话不多说了，大家还是直接看代码吧~
<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;
}
资源评论
weixin_38693528
- 粉丝: 2
- 资源: 913
最新资源
- 基于CarNet实现裂缝检测python源码+文档说明+数据+图片(课程设计)
- 课程设计-基于耐火材料裂缝剥落检测python源码+课件
- 基于OpenCV的视频道路车道检测python源码+文档说明+实验演示+图片+使用方法(高分毕业设计)
- 基于OpenCV的案例:图像边缘、角点和轮廓检测，图像分割，图像增强;图片拼接；运动目标检测，颜色直方图比较，三帧帧差法，抠图
- SmartPlug-html大一笔记
- SmartPlug-proteusdemo
- Preliminary Findings on Handmade Rattan Baby Crib andBassinet Designs Regarding.zip
- aveebfq_v1.2.83_downyi.com.apk
- 基于有机发光二极管(OLED)的建模优化算法的matlab仿真源码+数据+文档说明+项目说明(高分课程设计)
- hash01-test.c 本人哈希表（一）的示例代码，仅供参考！
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
