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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 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解析html的实现代码
2011/08/08 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
vue.js中created方法作用
2018/03/30 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python本地与全局命名空间用法实例
2015/06/16 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
python破解zip加密文件的方法
2018/05/31 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
《长城》教学反思
2014/02/14 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
小学三年级学生评语
2014/04/22 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
领导干部失职检讨书
2015/05/05 职场文书
单位证明范文
2015/06/18 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书