vue.js实现的绑定class操作示例

本文实例讲述了vue.js实现的绑定class操作。分享给大家供大家参考，具体如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- Vue.js -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app1">
  <!--# 给v-bind设置一个对象，可以动态地切换class #-->
  <div :class="{'active':isActive}">app1</div>
</div>
<div id="app2">
  <!--# 给v-bind设置一个对象，可以动态地切换class #-->
  <!--# 对象中也可以传入多个属性，来动态切换class。另外，:class可以与普通class共存 #-->
  <div class="static" :class="{'active':isActive,'error':isError}">app2</div>
</div>
<div id="app3">
  <!--# 给v-bind设置一个对象，可以动态地切换class #-->
  <!--# 当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用data或computer #-->
  <div :class="classes">app3</div>
</div>
</body>
</html>
<script>
  //例子一
  var app1 = new Vue({
    el:'#app1',
    data:{
      //类名isActive，当其为true时，div会拥有类名active，为false时则没有
      isActive:true
    }
  });
  //例子二
  var app2 = new Vue({
    el:'#app2',
    data:{
      //类名isActive，当其为true时，div会拥有类名active，为false时则没有
      isActive:true,
      //类名isError，当其为true时，div会拥有类名error，为false时则没有
      isError:true
    }
  });
  //例子三
  var app3 = new Vue({
    el:'#app3',
    data:{
      isActive:true,
      isError:false
    },
    computed:{
      classes:function () {
        return {
          active:this.isActive && !this.isError
        }
        //除了计算属性，你也可以直接绑定一个Object类型的数据，或者使用类似计算机属性的methods
      }
    }
  })
</script>

使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

希望本文所述对大家vue.js程序设计有所帮助。

赞 (0)

相关推荐

  • Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head> <meta charset="utf-8"> <title>Vue test</title> <style type="text/css"> body {font-family: Verdana;} p { fo

  • 学习vue.js中class与style绑定

    关于vue.js中class与style绑定的练习代码,分享给大家,供大家参考: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs中Class与Style 绑定</title> <link rel="stylesheet" href="css/vu

  • vue.js绑定class和style样式（6）

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 通过 v-bind:class 或者 :class 来为style或者class来绑定 绑定class <div class="test">

  • vue.js学习笔记之绑定style样式和class列表

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q

  • Vue.js绑定HTML class数组语法错误的原因分析

    Vue.js绑定HTML class数组语法错误,详情如下所示: 昨天在官网教程上发现一个错误是这样的,下面看图 http://cn.vuejs.org/guide/class-and-style.html 当有多个条件class时这样写有些繁琐.在1.0.19+中,可以在数组语法中使用对象语法: 如果这样写是可以执行成功的,但有错误 data: { classA: 'class-a', classB: 'class-b', classC: 'class-c', isB: true, isC:

  • vue.js入门教程之绑定class和style样式

    一.前言 相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 二.绑定 HTML Class 请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}&quo

  • 详解vue.js之绑定class和style的示例代码

    一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }"></div>.class后面的双引号里接受一个对象字面量/对象引用/数组作为参数, 这里,{active: isActive}是对象参数,active是class名,isActive是一个布尔值.下面是一个例子: 绑定对象字面量 html: <div id="classBind">

  • 详解Vue.js动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM "绑定"到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新.基于这种特性,通过vue.js动态绑定class就变得非常简单. 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: <a v-bind:href="http://www.cnblogs.c

  • 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.js每天必学之Class与样式绑定

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 尽管可以用 Mustache 标签绑定 class,比如 `{% raw %}class="{{ className }}"

随机推荐