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 相关文章推荐
用于table内容排序
Jul 21 Javascript
在网页中屏蔽快捷键
Sep 06 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
js读写json文件实例代码
Oct 21 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
Element PageHeader页头的使用方法
Jul 26 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/10/09 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
简单实现PHP留言板功能
2016/12/21 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python中的装饰器用法详解
2015/01/14 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
pytorch实现线性拟合方式
2020/01/15 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
学习党课思想汇报
2013/12/29 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
小学生作文评语
2014/04/18 职场文书
幼儿园安全管理制度
2015/08/05 职场文书