详解vue.js之绑定class和style的示例代码


Posted in Javascript onAugust 24, 2017

一.绑定Class属性。

绑定数据用v-bind:命令,简写成:

语法:<div v-bind:class="{ active: isActive }"></div>。class后面的双引号里接受一个对象字面量/对象引用/数组作为参数,

这里,{active: isActive}是对象参数,active是class名,isActive是一个布尔值。下面是一个例子:

绑定对象字面量

html:

<div id="classBind">
  <span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle">
  状态:{{alert}}{{isSafe}}
  </span>
</div>
//js
var app11=new Vue({
  el:'#classBind',
  data:{
    isWarning:true,
    alertList:['红色警报','警报解除'],
    alert:''
  },
  computed:{
    isSafe:function(){
      return !this.isWarning;
    }
  },
  methods:{
    toggle:function(){
      this.isWarning=!this.isWarning;
      this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
    }
  }

});

css:

.warning{
  color:#f24;
}
.safe{
  color:#42b983;
}

当点击状态文字时,可以切换后面的文字和颜色

//状态:警报解除true

//状态:红色警报false

绑定对象引用

这里绑定的对象可以写到Vue实例的data里面,而在class="classObj ",双引号中的class是对Vue实例中classObj对象的引用。classObj可以放在data中或者computed中,如果在computed中,则classObj所对应的函数必须返回一个对象如下:

js:

var app11=new Vue({
  el:'#classBind',
  data:{
    isWarning:true,
    alertList:['红色警报','警报解除'],
    alert:''
  },
  computed: {
    isSafe: function () {
      return !this.isWarning;
    },
    classObj:function(){
      return {
        warning: this.isWarning,
        safe:this.isSafe
      }
    }
  },
  methods:{
    toggle:function(){
      this.isWarning=!this.isWarning;
      this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
    }
  }

});

绑定数组

html:

<div v-bind:class="classArray" @click="removeClass()">去掉class</div>

js

data: {
classArray:["big",'red']
}
methods:{
removeClass:function(){

this.classArray.pop();
}
}

css:

.big{
  font-size:2rem;
}
.red{
   color:red;  
}

效果,点击去掉class,会调用removeClass函数,去掉classArray数组的最后一项,第一次,去掉'red',字体颜色由红变黑,再点,去掉'big',字体变小。

二、绑定内联style

此时此刻,我一边看着本页旁边的那个Vue api文档学,一边到这里卖,装逼的感觉真爽o(^?^)o

html

<div id="styleBind">
  <span :style="{color:theColor,fontSize:theSize+'px'}" @click="bigger">styleBind</span>
</div>

css

这个不需要css。。。

js

var app12=new Vue({
  el:'#styleBind',
  data:{
    theColor:'red',
    theSize:14
  },
  methods:{
    bigger:function(){
      this.theSize+=2;
    }
  }

});

除了传入对象字面量以外,也可以传入对象引用和数组给V-bind:style

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
采用call方式实现js继承
May 20 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
微信小程序删除处理详解
Aug 16 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
10个最优秀的Node.js MVC框架
Aug 24 #Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 #Javascript
Vue.js实现价格计算器功能
Mar 30 #Javascript
js微信分享实现代码
Oct 11 #Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 #Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 #Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 #Javascript
You might like
PHP的PDO操作简单示例
2016/03/30 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php测试kafka项目示例
2020/02/06 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
angularjs的select使用及默认选中设置
2017/04/08 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
Python的Django框架中的Context使用
2015/07/15 Python
Python rstrip()方法实例详解
2018/11/11 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
理财计划书
2014/08/14 职场文书
军训通讯稿范文
2015/07/18 职场文书
创业计划书之酒吧
2019/12/02 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
js之ajax文件上传
2021/05/13 Javascript