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. IOS UIScrollView + UIButton 实现segemet页面和顶部标签页水平滚动效果

    很长一段时间没有写博客了,最近在学习iOS开发,看了不少的代码,自己用UIScrollView和UIButton实现了水平滚动的效果,有点类似于今日头条的主界面框架,效果如下: 代码如下: MyScr ...

  2. 一款基于HTML5的Web 3D开发工具

    在我们协助客户进行3D应用的开发过程中,客户遇到的最头疼的问题是如何在短时间内学会使用TWaver 3D引擎,以及使用TWaver 3D来创建和导入项目所需的各种3D业务模型.由于项目涵盖的行业繁多. ...

  3. 又是一个小正则replace

    var a = "http://www.xx.com?id=111&-deb"; var b = "http://www.xx.com?-deb&id=1 ...

  4. 路由器换大Flash

    使用winhex自建编程器固件(我的是TP-WR941N V6) 1:使用winhex新建一个8M,16M的文件,编辑-全选,填充选块,填充十六进制数值 FF : 2:打开4M的原厂编程器固件(或者自 ...

  5. 自定义一个叫 ReadOnlyXmlMembershipProvider 的 MembershipProvider，用 XML 作为用户储藏室

    1. 配置 web.config <membership defaultProvider="AspNetReadOnlyXmlMembershipProvider"> ...

  6. 事务复制中的snapshot

        Snapshot agent读取article的信息,将article的内容和脚本放置到snapshot文件夹中: 接下来distribution agent会读取这些快照文件,传输到订阅,完 ...

  7. thinkphp -- 解决连接mssql后台管理菜单显示中文乱码问题（备忘）

    一开始使用的是mysql,数据库的编码是UTF-8 后来换数据库,mysql换成mssql2005,数据库编码为GBK,管理菜单出现乱码,如下所示(左图正常,右图乱码) 解决方法如下: 第一,查看数据 ...

  8. EF Attach时已存在的处理方式

    如果我们在先前的步骤中读取过数据,如 var list = db.Model.ToList(); 之后再,附加 var o = new Model { Id = 1 }; db.Model.Attac ...

  9. Android 布局之GridLayout

    Android 布局之GridLayout 1 GridLayout简介 GridLayout是Android4.0新提供的网格矩阵形式的布局控件. GridLayout的继承关系如下:java.la ...

  10. install keepalived on RedHat/CentOS to provide IP failover for web cluster

    Contents [hide]  1 Introduction 2 Our Sample Setup 3 Install Keepalived 4 Install Kernel Headers 5 C ...