在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+iview分页组件的封装
Nov 17 Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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 动态生成静态HTML页面示例代码
2014/01/15 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Python实现控制台中的进度条功能代码
2017/12/22 Python
Python 元类实例解析
2018/04/04 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python 实现单通道转3通道
2019/12/03 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
人事档案接收函
2014/01/12 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
读书活动总结范文
2014/04/26 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
迎新生晚会主持词
2015/06/30 职场文书
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS