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

现在很多网站，都是希望动态切换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"}
  },

})

以上就是本次介绍的全部相关知识点，感谢大家的学习和对我们的支持。

赞 (0)

相关推荐

  • 在vue中使用v-bind:class的选项卡方法

    //vue中的选项卡的实现,数据驱动dom,因此需要使用数据,来改变class: 详细见代码实现 <style> ul{overflow: hidden;} ul li{float: left;width: 150px;height: 35px;line-height: 35px;border: 1px solid red;list-style: none;cursor: pointer;} ul li.active{background-color: yellow} </style&g

  • Vue.js中用v-bind绑定class的注意事项

    Vue.js中用v-bind绑定class的注意事项

    前言 在Vue.js版本:1.0.27,使用Vue.js中V-bind指令来绑定class和style时,Vue.js对其进行了增强.表达式结果出了字符串之外,还可以是对象或者数组. 这里自己对其进行了测试,发现有一下的问题: 如果使用对象语法对class进行绑定话,class名称必须加上引号,代表所对应的样式,否则会将其当做对象的属性,从而使得初始化报错. <!DOCTYPE html> <html lang="en"> <head> <me

  • vue基础之v-bind属性、class和style用法分析

    本文实例讲述了vue基础之v-bind属性.class和style用法.分享给大家供大家参考,具体如下: 一.属性 属性: v-bind:src="" width/height/title.... 简写: :src=""    推荐 <img src="{{url}}" alt="">    效果能出来,但是会报一个404错误 <img v-bind:src="url" alt="

  • 在vue中v-bind使用三目运算符绑定class的实例

    如图所示: 通过动态的切换isOk就可以达到切换class的效果,isOk可以为一个表达式如num>1,如果data中num大于1,则显示classA,否则显示classB 以上这篇在vue中v-bind使用三目运算符绑定class的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 微信小程序如何像vue一样在动态绑定类名

    小程序 开发中遇到这样一个问题... 排行榜开发的时候,前三名的样式不同,其余的样式一样.但是都是通过同一元素来遍历的,当时卡了一下.后来发现有module模块化这一概念,于是查了下api,一下子就做出来了. 就是不同名次上边的样式根据实际情况展示效果. 模块化 我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块.模块只有通过 module.exports 或者 exports 才能对外暴露接口. 通俗的将就是自身独立,作用域只作用于该模块,与js互不影响. 主要代码 modu

  • vue.js选中动态绑定的radio的指定项

    vue.js选中动态绑定的radio的指定项

    上一文,介绍了vue.js动态添加.删除绑定的radio选项,本文介绍如何选中radio的某一项 绑定的数据和上文的model是一致的,选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中. 选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用checked='true',判断是否需要渲染ch

  • vue.js删除动态绑定的radio的指定项

    vue.js删除动态绑定的radio的指定项

    上图效果,动态添加绑定radio选项,然后也可以动态删除,右边编辑器删除,左边的视图也对应的删除. 视图代码 view: "<ul><li v-for='option in options'>" + "<input type='radio' :name='groupName'>{{option.text}}" + "</li></ul>", 数据绑定model.options: opti

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

  • vue.js给动态绑定的radio列表做批量编辑的方法

    每个题目绑定的题目结构如下json对象,每次动态添加选项就是将其加入了vue实例的某个数组对象中: vm.options.push({ id: "", text: "新选项", checked: false }); 现在对radio或者checkbox集合列表进行批量添加,这里使用到了textarea容器. textare每一行都是一条数据,它的内部是根据回车来区分(break-word自动换行不算),每一行是一个对象,整体就是一个文本数组了,获取如下: var c

  • Vue 框架之动态绑定 css 样式实例分析

    今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的第一个小实例: 源代码 html 文件: 请看注释 <!DOCTYPE html>

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

    现在很多网站,都是希望动态切换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> <!-

  • Vue.js样式动态绑定实现小结

    在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,结合自身项目中遇到的一些情况,也参考了一些文档,针对vue.js样式的动态绑定切换做出如下小结: 动态切换的核心思想: 利用vue指令v-bind来实现动态绑定,从而设置切换不同的样式- vue的最大特点是数据驱动,利用特殊的语法将DOM"绑定"到底层数据,DOM与数据保持同步,每当数据发生变化,DOM视图就会做出相应的更新和响应,正是基于这种特性,我们得以实现class和style的动态绑定- (一定要充分理解数据驱动的含

  • jQuery使用bind动态绑定事件无效的处理方法

    最近在进行页面开发,在做页面特效的时候,需要给一个动态加载的按钮赋予一个事件 于是不假思索的 用$(obj).bind();  来绑定事件 . 但是这样存在一个问题: bind确实能绑定事件,但是那是相对于固定的html标签来说 当页面内容属于动态加载的时候,bind事件就存在一个bug,  只能bind一次,当你第二次触发事件的时候就没用了 例如: 我给<a>标签赋予一个click , <a>标签包括内容都是从后台数据读取然后动态加载的.当我使用bind来绑定click事件,这时

  • vue项目中引入Sass实例方法

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

随机推荐