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 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
JavaScript版代码高亮
2006/06/26 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
python基础教程之面向对象的一些概念
2014/08/29 Python
python实现Zabbix-API监控
2018/09/17 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
办公室文员工作自我评价
2013/12/01 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
2014年度党员自我评议
2014/09/13 职场文书
党员个人党性分析材料
2014/12/18 职场文书
作文评语集锦
2014/12/25 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
毕业感言怎么写
2015/07/31 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏