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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
javascript 隔行换色函数代码
2010/10/24 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
详解Python中的正则表达式的用法
2015/04/09 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python找出完数的方法
2018/11/12 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
单位委托书范本(3篇)
2014/09/18 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
欠款起诉书范文
2015/05/19 职场文书
法定代表人免职证明
2015/06/24 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
青年教师听课心得体会
2016/01/15 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
详解如何使用Nginx解决跨域问题
2022/05/06 Servers