详解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 相关文章推荐
jQuery 相关控件的事件操作分解
Aug 03 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jquery append与appendTo方法比较
May 24 jQuery
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
JS实现音乐导航特效
Jan 06 Javascript
JavaScript代码实现简单计算器
Dec 27 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
多人战的战术与战略
2020/03/04 星际争霸
elgg 获取文件图标地址的方法
2010/03/20 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python编程中time模块的一些关键用法解析
2016/01/19 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
使用tensorflow实现线性svm
2018/09/07 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python如何提升爬虫效率
2020/09/27 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
党员违纪检讨书怎么写
2014/11/01 职场文书
小学作文之描写天气
2019/08/15 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python
win10搭建配置ftp服务器的方法
2022/08/05 Servers