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. Qt编写可换肤的中文双拼汉字输入法

    时间过得真快,不知不觉已到2015年,农历春节一眨眼就过去了,端正状态收拾心情整装待发出发. 曾经有段时间,我有一个很执着的梦想,我要导演出一部空前绝后的巨幕.不过现实无情地碾碎我的梦想,也同时将我推 ...

  2. Android SDK开发包国内下载地址

    不知道是因为最近kaihui还是怎么的,打开android sdk官方网站特别的慢,想下载最新版本的platform几乎变成不可能完成的任务,不知道为什么Google不像Apache那样在各国设立镜像 ...

  3. python 自动化测试资料

    python 自动化测试资料: http://yunpan.cn/QXVvwVJsAsPnb

  4. 蓝凌OA二次开发手册

    1.蓝凌OA表单前端调用后台数据 一.后台存储过程: create procedure sp_test @ftext nvarchar(50) as begin select @ftext as '测 ...

  5. win7中的画图

    下午做一个图像篡改定位实验,在win7下对图像进行修改,然后通过其最低位判断篡改位置. 程序如何都调试不出来.反复简化程序,发现win7中的画图对图像存在优化. 当更改图像后,会自动调整当前图像的显示 ...

  6. typeof与GetType

    typeof: The typeof operator is used to obtain the System.Type object for a type. 运算符,获得某一类型的 System. ...

  7. RandomUser – 生成随机用户 JSON 数据的 API

    RandomUser 是一个 API,它为您提供了一个或者一批随机生成的用户.这些用户可以在 Web 应用程序原型中用作占位符,将节省您创建自己的占位符信息的时间.您可以使用 AJAX 或其他方法来调 ...

  8. 手把手教你从购买vps到搭建一个node服务器

    要准备什么? 1.5刀 2.最好有FQ软件(可以用蓝灯) let's Go! 一.vps购买 vps可以选择digital ocean(do) 链接 ,由于是外国网站,响应比较慢,所以最好翻个墙. g ...

  9. Android 学习笔记之使用多线程实现断点下载...

    PS:莫名其妙的迷茫... 学习内容: 1.使用多线程实现文件下载...   多线程下载是加快下载速度的一种方式..通过开启多个线程去执行一个任务..可以使任务的执行速度变快..多线程的任务下载时常都 ...

  10. 创建一个带模版的用户控件 V.3

    再重构此篇<创建一个带模版的用户控件  V.2>http://www.cnblogs.com/insus/p/4164149.html 让其它动态实现header,Item和Footer. ...