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学习网址备忘
May 29 Javascript
海量经典的jQuery插件集合
Jan 12 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
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
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
PHP实现百度人脸识别
2019/05/06 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python删除windows垃圾文件的方法
2015/07/14 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
父亲追悼会答谢词
2014/01/17 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
门面租赁合同范文
2019/08/06 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL