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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
js日期联动示例
May 02 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 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
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
Python实现控制台进度条功能
2016/01/04 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
会议接待欢迎词
2014/01/12 职场文书
银行优秀员工事迹
2014/02/06 职场文书
小学生检讨书大全
2014/02/06 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
公司门卫工作职责
2014/06/28 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
同意报考证明
2015/06/17 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA