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 相关文章推荐
jQuery 获取URL参数的插件
Mar 04 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
前端性能优化建议
Sep 17 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
Python松散正则表达式用法分析
2016/04/29 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
用Python shell简化开发
2018/08/08 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
python如何写try语句
2020/07/14 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
超市员工管理制度
2015/08/06 职场文书
2019各种保证书范文
2019/06/24 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS