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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
AngularJS表单基本操作
Jan 09 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
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数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
javascript中 try catch用法
2015/08/16 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python中字符串的格式化方法小结
2016/05/03 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
pyqt5自定义信号实例解析
2018/01/31 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python实现事件驱动
2018/11/21 Python
django中间键重定向实例方法
2019/11/10 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
python 实现视频 图像帧提取
2019/12/10 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
主题党日活动总结
2014/07/08 职场文书
课程设计感想范文
2015/08/11 职场文书