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. ISO给UIImageView增加点击事件

    自己做了一个九宫格,里面的图标都是由多张图片重叠构成,然后包装成一个button来使用: 遇到的问题是如何给这个“button”增加点击事件? 解决思路1:网友提示在该“button”上增加一个真正的 ...

  2. HTML 表格的属性设置

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解.   对于很多初学HTML的人来说,表格<table>是最常用的标 ...

  3. 【迁移学习】2010-A Survey on Transfer Learning

    资源:http://www.cse.ust.hk/TL/ 简介: 一个例子: 关于照片的情感分析. 源:比如你之前已经搜集了大量N种类型物品的图片进行了大量的人工标记(label),耗费了巨大的人力物 ...

  4. 发布大幅重构优化的 TouchVG 1.0.2

    发布大幅重构优化的 TouchVG 1.0.2,支持SVG.多模块扩展结构,欢迎评阅改进.提交pull request. https://github.com/rhcad/touchvg 关于 Tou ...

  5. 资源 | 数十种TensorFlow实现案例汇集：代码+笔记

    选自 Github 机器之心编译 参与:吴攀.李亚洲 这是使用 TensorFlow 实现流行的机器学习算法的教程汇集.本汇集的目标是让读者可以轻松通过案例深入 TensorFlow. 这些案例适合那 ...

  6. centos 一键安装jdk

    先检查 yum list installed |grep java 卸载JDK相关文件输入:yum -y remove java-1.7.0-openjdk*. 卸载tzdata-java输入:yum ...

  7. Pop - Facebook 开源 iOS & OS X 动画库

    Pop 是一个可扩展的 iOS & OS X 动画引擎.除了基本的静态动画,它支持弹簧和动态衰减的动画,因此可以用于构建现实的,基于物理的交互效果. 它的 API 可以与现有的 Objecti ...

  8. 敏捷个人手机应用iOS和Android公开注册

    敏捷个人手机应用iOS出炉了,现在免费公开注册,截止时间到4月20日,注册时的邀请码是7个字符: 1.admin Android下载地址:http://agileme-download.qiniudn ...

  9. Mysql学习笔记（七）查(补充)

    PS:五一还是要学习...虽然有点苦逼..但是路是自己选的,那么自己就要坚持的走下去... 学习内容: 1.数据库查找的补充... 查找涉及的东西比较多,在上一个章节没有完全介绍...我们还是以pet ...

  10. QCustomplot使用分享(六) 坐标轴和网格线

    一.概述 前边已经写了5篇对QCustomPlot的讲解,看过上述的几篇文章后,基本就能做一些简单的使用了,但是如果想要做到高度的控制图表,那么坐标轴将是很重要的一部分,因为坐标轴就是图表的一个参考系 ...