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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
JavaScript中string对象
Jun 12 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
vue 自定义组件添加原生事件
Apr 21 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大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
python字符串对其居中显示的方法
2015/07/11 Python
Python使用爬虫猜密码
2016/02/19 Python
简单的python后台管理程序
2017/04/13 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
MySQL数据库事务的四大特性
2022/04/20 MySQL