一、知识点

动态绑定：

vue-class：

  • 三目写法
  • 对象写法
  • 数组写法

vue-style:

  • 三目写法
  • 对象写法
  • 数组写法

二、代码示例

1. vue-class

vue-class三目写法

<head>

        <meta charset="utf-8">

        <script src="./js/vue.js"></script><!-- 引入vue.js -->

        <style>

            .red {

                background: red;     /* isActive为true时的样式 */

            }

            .yellow {

                background: yellow;   /* isActive为false时的样式 */

            }

        </style>

    <body>

        <div id="div1">

            <!-- 视图层新建一个div -->

            <div :class="isActive?'red':'yellow'">动态绑定class-三目写法</div> <!-- 当isActive为true时，背景为red，否则为yellow -->

            <button @click="handleclick()">切换</button>    <!-- 通过点击按钮改变isActive的值 -->

        </div>

        <script>

            var vm = new Vue({

                el: '#div1', //绑定视图层的id

                data: {

                    isActive: true                    //isActive初始值为true

                },

                methods: {

                    handleclick() {

                        this.isActive = !this.isActive //改变isActive的值，true变false，false变true

                    }

                }

            })

        </script>

    </body>

运行结果：

点击切换按钮效果：

vue-class对象写法

管理多个class时，只需要通过class的属性值为true或false即可

<body>

        <div id="div1">

            <!-- 视图层新建一个div -->

            <div :class="classobj">动态绑定class-对象写法</div>

        </div>

        <script>

            var vm = new Vue({

                el: '#div1', //绑定视图层的id

                data: {

                    classobj: {

                        a: true,

                        b: true,

                    },

                }

            })

        </script

</body>

运行结果：

我们可以看出a和b为true时，a，b类都用上了

当我们在浏览器控制台把a改为false

运行结果如下：

class中只有b了，所以可以通过对想法快速管理我们的类

vue-class数组写法

<body>

        <div id="div1">

            <!-- 视图层新建一个div -->

            <div :class="classarr">动态绑定class-数组写法</div>

        </div>

        <script>

            var vm = new Vue({

                el: '#div1', //绑定视图层的id

                data: {

                    classarr:["a","b"],

                }

            })

        </script

</body>

运行结果：

如果想管理类直接对数组进行操作就行

对数组执行删除操作（删掉b）

操作后结果：

对数组执行新增操作（新增c）

操作后结果：

刚才通过vue-class对三目写法，对象写法，数组写法进行了一个详细的讲解，相信大家对他们也有了一定的了解，由于原理相同，vue-style我们直接上代码

2. vue-style

vue-style三目写法

<body>

        <div id="div1">

            <!-- 视图层新建一个div -->

            <div :style="'background:'+(isActive?'red':'yellow')">动态绑定style-三目写法</div>  <!-- isActive为true时，背景色为red，否则为yellow -->

            <button @click="handleclick()">切换</button>

        </div>

        <script>

            var vm = new Vue({

                el: '#div1', //绑定视图层的id

                data: {

                    isActive: true,    //isActive初值值为true

                },

                methods: {

                    handleclick() {

                        this.isActive = !this.isActive     //通过点击改变isActive的值

                    }

                }

            })

        </script>

</body>

vue-style对象写法

<body>

        <div id="div1">

            <!-- 视图层新建一个div -->

            <div :style="styleobj">动态绑定style-对象写法</div>

        </div>

        <script>

            var vm = new Vue({

                el: '#div1', //绑定视图层的id

                data: {

                    styleobj: {

                        background: 'red'      //把背景色设为红色

                    },

                }

            })

        </script>

</body>

vue-style数组写法

<body>

        <div id="div1">

            <!-- 视图层新建一个div -->

            <div :style="stylearr">动态绑定style-数组写法</div>

        </div>

        <script>

            var vm = new Vue({

                el: '#div1', //绑定视图层的id

                data: {

                    stylearr:[

                        {background:"yellow"}           //背景色为黄色

                    ]

                }

            })

        </script>

</body>

vue学习笔记3： 动态绑定的更多相关文章

  1. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  2. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  3. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  4. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  5. vue学习笔记之：为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  6. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  7. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  8. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  9. AntDesign vue学习笔记（七）Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  10. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

随机推荐

  1. Python--day38--事件

    1,事件的方法: #set和clear #分别用来修改一个事件的状态 True或者False#is_set用来查看一个事件的状态#wait 是依据事件的状态来决定自己是否阻塞# False最 True ...

  2. java 利用反射创建对象

    创建对象: 1.使用Class对象的newInstance()方法创建该Class对象的实例,此时该Class对象必须要有无参数的构造方法. 2.使用Class对象获取指定的Constructor对象 ...

  3. HDU 1698 Just a Hook （线段树模板题-区间求和）

    Just a Hook In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most of t ...

  4. win10 uwp 商业游戏 1.1.5

    本文是在win10 uwp 商业游戏 基础上继续开发,添加一些无聊的游戏 因为在发布几个月,下载量很少,小伙伴说游戏就玩不到几分钟就不想玩,于是我就想加入其他游戏 下面我来告诉大家如何在游戏中添加多个 ...

  5. CentOS 7 修改root密码

    1.开机,在启动菜单上选择CentOS Linux (3.10**.**.x86**) 7 (Core) 按下e,进入编辑模式2.将光标一直移动到 LANG=en_US.UTF-8 后面(如果找不到, ...

  6. 驳“C语言已经死了”

    http://blog.csdn.net/xushiweizh/article/details/1476422

  7. 修改jupyter notebook响应的浏览器

    Windows下更改jupyter notebook默认响应的浏览器为Chrome 1.命令行下输入:jupyter notebook --generate-config 2.C盘中找到并打开文件:C ...

  8. java连接elasticsearch：查询、添加数据

    导入jar包 <!-- https://mvnrepository.com/artifact/org.elasticsearch.client/transport --> <depe ...

  9. iptables匹配端口范围，映射，网络状态

    ####匹配端口范围:iptables -I INPUT -p tcp -m multiport --dport 21,22,23,24 -j ACCEPT <==次选iptables -I I ...

  10. python之面向对象中的多态

    直接看代码: class Dog: def __init__(self,name): self.name = name def play(self): print("%s在汪汪汪" ...