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中xml操作实现代码
Nov 21 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
JS中常用的消息框总结
Feb 24 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 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
2006/12/23 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php可变长参数处理函数详解
2017/02/22 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python 时间处理datetime实例
2008/09/06 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
四议两公开实施方案
2014/03/28 职场文书
推荐信怎么写
2014/05/09 职场文书
毕业生求职信
2014/06/10 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
小学中等生评语
2014/12/29 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
SQL Server实现分页方法介绍
2022/03/16 SQL Server