TA的每日心情 | 无聊 2019-4-21 13:02 |
---|
签到天数: 3 天 [LV.2]圆转纯熟
|
我就废话不多说了,大家还是直接看代码吧~- <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其中一个属性值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持咔叽论坛。
原文地址:https://www.jb51.net/article/201560.htm |
|