Vue v-bind动态绑定class实例方法


Posted in Javascript onJanuary 15, 2020

现在很多网站,都是希望动态切换class,更换css样式。下面我们使用Vue的v-bind绑定class

v-bind动态绑定class

对象语法绑定(常用)

red和size的值为true就在class显示red和size,false就不显示。下面有两种写法:

<style>
  .red{
    color: red;
  }
  .size{
    font-size: 20px;
  }
</style>

<div id="app">
  <ul>
    <!--写法一-->
    <li :class="{red:isColor,size:isSize}">{{list}}</li>
    <!--写法二,v-bind绑定函数必须加上()-->
    <li :class="listData()">{{list}}</li>
  </ul>
  <!--点击这个,red的true变false,反之red的false变true-->
  <button @click="reverse">反选</button>
</div>

<script>
  const app=new Vue({
    el:"#app",
    data:{
      list:"Vue",
      isColor:true,
      isSize:true
    },
    methods:{
      reverse:function () {
        return this.isColor = !this.isColor;
      },
      //写法二
      listData:function () {
        return {red:this.isColor,size:this.isSize};
      }
    }
  })
</script>

注意:v-bind:class指令可以与普通的class特性共存;对应的语法糖:“:class”等于v-bind:class

数组语法绑定

数组语法不常用,主要是它不灵活:

<div id="app">
  <ul>
    <!--这里绑定data的变量-->
    <li :class="[acli,bcli]">{{list}}</li>
  </ul>
</div>

const app=new Vue({
    el:"#app",
    data:{
      list:"Vue",
      acli:"aaa",
      bcli:"bbb",
    },
})

字符串绑定更数组语法绑定差不多,不常用

<div id="demo">
<span :class="classA"></span>
</div>

let vm = new Vue({


el:"#demo",


data:{



classA:"string"


}
})

综合的写法

<div id="demo">
<span :class="[one,{‘classA‘:classa,‘classB‘:classb}]"></span>
</div>

var vm = new Vue({


el:"#demo",


data:{



one:"string",



classa:true,



classb:false


}
})

v-bind动态绑定style

对象语法绑定(常用)

v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。

<div id="app">
  <ul>
    <!--{key(属性名):value(属性值)}-->
    <li :style="{color:color,fontSize:size+'px'}">{{list}}</li>
    <!--如果你想属性值原样数组,就必须加上单引号-->
    <li :style="{color:'red'}">{{list}}</li>
  </ul>
</div>

const app=new Vue({
  el:"#app",
  data:{
    list:"Vue",
    color:"red",

 size:50
  },
})

注:对象语法的value(属性值),如果加上单引号就原样输出,不加就输出data的变量值

数组语法绑定

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:

<div v-bind:style="[baseStyles,overridingStyles]">{{list}}</div>

const app=new Vue({
  el:"#app",
  data:{
    list:"Vue",
    baseStyles:{fontSize:"50px",color:"red"},
    overridingStyles:{"margin-top":"50px"}
  },
  
})

以上就是本次介绍的全部相关知识点,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
JS 事件机制完整示例分析
Jan 15 #Javascript
JS实现滑动插件
Jan 15 #Javascript
JS实现滑动导航效果
Jan 14 #Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 #Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 #Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 #Javascript
JS window对象简单操作完整示例
Jan 14 #Javascript
You might like
一个简单的PHP投票程序源码
2007/03/11 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
JS定时器实例
2013/04/17 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
Python快速从注释生成文档的方法
2016/12/26 Python
详解Python3 基本数据类型
2019/04/19 Python
python 字典的打印实现
2019/09/26 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
公司JAVA开发面试题
2015/04/02 面试题
英文版区域经理求职信
2013/10/23 职场文书
八年级语文教学反思
2014/02/11 职场文书
农村党员对照检查材料
2014/09/24 职场文书
农村婚庆主持词
2015/06/29 职场文书
导游词之青城山景区
2019/09/27 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
Golang 对es的操作实例
2022/04/20 Golang
浅谈Node的内存泄露问题
2022/05/06 NodeJs