gitHub地址:https://github.com/manlili/vue_learn里面的lesson07

一 用对象的方法绑定class

很简单,举个栗子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>class与style绑定</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            <div class="otherClass" :class="{'class1':name1,'class2':name2}">我是文字</div> <!--法一:用对象的方式实现-->

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el:".test",

                data: {

                    name1: true,

                    name2: false,

                }

            })

        </script>

    </body>

</html>

最后实现效果

关于使用对象绑定class,还可以用另外一种写法:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>class与style绑定</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            <div class="test" :class="classObj">我是文字</div> <!--法一:用对象的方式实现-->

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el:".test",

                data: {

                    classObj: {

                        name1: false,

                        name2: true

                    }

                }

            })

        </script>

    </body>

</html>

最后的实现效果是:

二 用数组的方法绑定class

很简单,举个栗子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>class与style绑定</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            <div class="otherClass" :class="[class1,class2]">我是文字</div> <!--法二:用数组的方式实现-->

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el:".test",

                data: {

                    class1: 'name1',

                    class2: 'name2',

                }

            })

        </script>

    </body>

</html>

实现效果:

其实在数组中还可以用判断是否显示这个类名,举个例子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>class与style绑定</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            <div class="otherClass" :class="[class1,isShow? class2:'']">我是文字</div> <!--法二:用数组的方式实现-->

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el:".test",

                data: {

                    class1: 'name1',

                    class2: 'name2',

                    isShow: false

                }

            })

        </script>

    </body>

</html>

实现效果是:

三  用数组和对象混合的方法绑定class

举个例子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>class与style绑定</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            <div class="otherClass" :class="[class1,{class2: isShow}]">我是文字</div> <!--法二:用数组的方式实现-->

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el:".test",

                data: {

                    class1: 'name1',

                    class2: 'name2',

                    isShow: true

                }

            })

        </script>

    </body>

</html>

实现的效果:

四 用对象的方式实现style绑定

举个例子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>class与style绑定</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            <div class="otherClass" :style="{color: yanse,width: kuan + 'px' }">我是文字</div> <!--法一:用对象的方式实现-->

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el:".test",

                data: {

                    yanse: 'red',

                    kuan: 100,

                }

            })

        </script>

    </body>

</html>

实现效果如下:

其实也可以写为第二种方式:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>class与style绑定</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            <div class="otherClass" :style="styleObj">我是文字</div> <!--法一:用对象的方式实现-->

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el:".test",

                data: {

                    styleObj: {

                        color: 'pink',

                        width: '200px',

                    }

                }

            })

        </script>

    </body>

</html>

实现结果是:

五 用数组的方式实现style绑定

没法单独用数组的实现style绑定,或者我没有测试出来方法,写在这里纯粹是因为我有强迫症,需要占个位置

六 用数组和对象混合的方式实现style绑定

举个例子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>class与style绑定</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            <div class="otherClass" :style="[styleObjectA,styleObjectB]">我是文字</div> <!--法一:用数组和对象的方式实现-->

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el:".test",

                data: {

                    styleObjectA: {

                        color: 'red',

                        width: '100px',

                    },

                    styleObjectB: {

                        top: '20px'

                    }

                }

            })

        </script>

    </body>

</html>

实现效果:

Vue中class与style绑定的更多相关文章

  1. vue中,class与style绑定

    <template> <div> <p v-bind:class="{active:isActive,'demo':Demo}">嘿嘿</ ...

  2. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  3. vue中的数据双向绑定

    学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...

  4. vue 的 Class 与 Style 绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...

  5. vue基础——Class与Style绑定

    Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见的需求. 因为它们都是属性,所以我们可以用v-bind来处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼 ...

  6. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  7. 前端框架之Vue(4)-Class与Style绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将  ...

  8. vue基础---Class 与 Style 绑定

    [一]绑定HTML Class (1)对象语法 ①普通绑定class <div id="area" v-bind:class="className"> ...

  9. vue中html模板使用绑定的全局函数

    我们知道在script中使用vue绑定的全局函数时, 我们需要用这种方式使用: this.Util.Fun(e) 那在模板中, 比如v-if中想使用Fun函数怎么办呢?你应该这样做 <i v-i ...

随机推荐

  1. UNIX环境高级编程笔记之进程环境

    本章讲的都是一些非常基础的知识,目的是为了下一章讲进程控制做铺垫,所以,本章就不做过多的总结了,直接看图吧.

  2. POJ 1451 T9

    T9 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 3083   Accepted: 1101 Description Ba ...

  3. Linux SSH 连接不上

    http://blog.csdn.net/cryhelyxx/article/details/46473783 在xshell下用ssh登录远程主机centos出现以下问题: Connection e ...

  4. 我是如何用Go语言搭建自己的博客的

    前言: 话说,已经很久没有在博客园更新博客了,之前写的关于go语言的系列学习文章<让我们一起Go>也由于种种原因一度中断.但是,正如我之前在文章中所写,可以慢慢来,但是对于Go语言的学习却 ...

  5. 用MapX与C#开发地理信息系统

    转:http://www.cnblogs.com/dachie/archive/2010/08/17/1801598.html 第四章 MapX与C#实例... 5 4.1 MapX图层建立... 5 ...

  6. 【转载】ubuntu和debian环境下无法挂载vmware虚拟机共享目录的解决办法

    转载自:http://www.fengfly.com/plus/view-210022-1.html 第一步,安装VMware Tools 打开虚拟机ubuntu(debian原理一样)后,首先,点击 ...

  7. JS微信分享不好写？来封装一下

    微信开发这块,作为开发工程师来说,一般是避免不了的,也好像发现一些朋友写微信分享都是在每个页面一大把一大把的代码. 代码冗余,即便是复制过来再改也很麻烦. 之前自己封装了一下js,今天来分享一下,希望 ...

  8. Hadoop下面WordCount运行详解

    单词计数是最简单也是最能体现MapReduce思想的程序之一,可以称为MapReduce版"Hello World",该程序的完整代码可以在Hadoop安装包的"src/ ...

  9. SQL SERVER 分布式事务(DTC)

    BEGIN DISTRIBUTED TRANSACTION指定一个由 Microsoft 分布式事务处理协调器 (MS DTC) 管理的 Transact-SQL 分布式事务的起始. 语法BEGIN ...

  10. awk引用外部变量及调用系统命令方法

    目标:想用awk与scp命令批量传送文件 前提:先搭好主机间的免密登陆环境(参考:http://www.cnblogs.com/tankaixiong/p/4172942.html) 实现脚本方法: ...