在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调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
Vue Element plus使用方法梳理
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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
理解javascript回调函数
2014/12/28 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
微信小程序实现订单倒计时
2020/11/01 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
python 队列详解及实例代码
2016/10/18 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Python基于当前时间批量创建文件
2020/05/07 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
战友聚会邀请函
2014/01/18 职场文书
分层教学实施方案
2014/03/19 职场文书
国庆节演讲稿
2014/05/27 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
大雁塔导游词
2015/02/04 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
2019求职信大礼包
2019/05/15 职场文书