vue通过style或者class改变样式的实例代码


Posted in Javascript onOctober 30, 2018

通过style改变样式

<div :style="{ 'min-height': size + 'px' }"></div> 
<div :style="[{ 'min-height': size + 'px' },{color:'red'}]"></div> 
<div :style="{ 'opacity': value ? 0.5 : 1 }"></div>

通过className改变样式

​<div class="static"
   v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

<script>
data: {
 isActive: true,
 hasError: false
}
</script>

<style>
.active{
  ...
}
.text-danger{
  ...
}
</style>

PS:下面看下Vue的一些样式(class/style)绑定

样式有两种:class、style

class

1、对象语法

①传给 :class 一个对象

比如:

<div :class="{ active : isActive}"></div>

在这里,isActive的真值决定active这个样式是否显示

②传给 :class 一个对象变量

再比如,可以直接绑定一个对象

<div :class = "duixiang" ></div>

export default{
  data(){
   return{
    duixiang :{
     active : true
    }
   }
  } 
}

③在②的基础上,把这个对象变量放到computed计算属性里

data: {
 isActive: true,
 error: null
},
computed: {
 classObject: function () {
  return {
   active: this.isActive && !this.error,
   'text-danger': this.error && this.error.type === 'fatal',
  }
 }
}

2、数组语法

传给 :class 一个数组(数组里面是变量名,然后具体变量名所指的内容写到data里)

<div :class = "[ n , i]"> </div>
export default{
 data(){
  return{
   n : ' active ',
   i : ' text-danger ',
  }
  }
}

 上面的代码在最后会宣传成为<div class = "active text-anger"></div>

style

1、对象语法

①传给 :style一个对象(这个对象是个JavaScript对象)。记住!CSS属性名可以用驼峰式命名

<div :style = " { color : activeColor , fontSize : fontSize + 'px' } "></div>
//然后在data里面写明,冒号后边的这个变量的实际内容,如果是单位,像px这种就直接用字符串引着就行了
data: {
 activeColor: 'red',
 fontSize: 30
}

②传给 :style一个对象变量。

<div v-bind:style="styleObject"></div>
//然后在data声明这个对象变量是指代一个怎样具体的对象
data: {
 styleObject: {
  color: 'red',
  fontSize: '13px'
 }
}

同样的,对象语法常常结合返回对象的计算属性使用。

总结

以上所述是小编给大家介绍的vue通过style或者class改变样式的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
js断点调试心得分享(必看篇)
Dec 08 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 #Javascript
微信小程序实现左滑修改、删除功能
Oct 19 #Javascript
小程序实现列表删除功能
Oct 30 #Javascript
require.js 加载过程与使用方法介绍
Oct 30 #Javascript
小程序实现左滑删除功能
Oct 30 #Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 #Javascript
小程序云开发部署攻略(图文教程)
Oct 30 #Javascript
You might like
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
JavaScript 参考教程
2006/12/29 Javascript
cssQuery()的下载与使用方法
2007/01/12 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
Python学习pygal绘制线图代码分享
2017/12/09 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python将回车作为输入内容的实例
2018/06/23 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
python能做什么 python的含义
2019/10/12 Python
python制作朋友圈九宫格图片
2019/11/03 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
一套C#面试题
2013/10/09 面试题
民生工作实施方案
2014/05/31 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2015公司年度工作总结
2015/05/14 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python
小程序实现侧滑删除功能
2022/06/25 Javascript