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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
vue mounted组件的使用
Jun 18 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
js下拉菜单语言选项简单实现
2013/09/23 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
js中this用法实例详解
2015/05/05 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
js实现图片实时时钟
2020/01/15 Javascript
Python中的列表生成式与生成器学习教程
2016/03/13 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
python分析作业提交情况
2017/11/22 Python
tensorflow获取变量维度信息
2018/03/10 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Python count函数使用方法实例解析
2020/03/23 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
办理居住证介绍信
2014/01/15 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers