1、v-bind指令介绍

　　在前端开发过程中最常做的事莫过于class类名的绑定与style内联样式的修改，Vue中使用v-bind指令来实现这两个需求，在第二章中给出过简单的示例，下面我们来看一下v-bind指令的具体用法。

2、绑定class类名的三种方法

2.1、对象绑定法

　　所谓对象就是类似Python中的字典，以键值对的形式来动态控制一个class是否加载，如下示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <title>Vue 示例</title>

</head>

<body>

    <div id="app1">
　　　　 <!--:class等价于v-bind:class,:class可以与普通class同时存在，此处通过：class的对象中的isActive和isError的值来控制active和error类是否加载，最后的渲染结果为<div class="static active"></div>-->

        <div class="static" :class="{'active':isActive,'error':isError}"></div>

    </div>

    <script>

        var app1=new Vue({

            el:'#app1',

            data:{

                isActive:true,

                isError:false

            }

        });

    </script>

</body>

</html>

当对象中的class类较多时，可以使用计算属性或methods属性来绑定，如下示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <title>Vue 示例</title>

</head>

<body>

    <div id="app1">

        <div class="static" :class="classes"></div>

    </div>

    <script>

        var app1=new Vue({

            el:'#app1',

            data:{

                isActive:true,

                isError:false

            },

            computed:{

                classes:function() {

                    return {active:this.isActive ,error:this.isError}

                }

            }

        });

    </script>

</body>

</html>

2.2、数组绑定法

数组绑定法就是给:class绑定一个数组，将data属性中的class类名引用到数组中，如下示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <title>Vue 示例</title>

</head>

<body>

    <div id="app">
        <!--经过渲染后active和error类会被应用到div标签上-->

        <div :class="[activeCls,errorCls]"></div>

    </div>

    <script>

        var app=new Vue({

            el:'#app',

            data:{

                activeCls:'active',

                errorCls:'error'

            }

        })

    </script>

</body>

</html>

使用数组绑定法时可以通过三元表达式来动态控制class类是否应用，如下示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <title>Vue 示例</title>

</head>

<body>

    <div id="app">
        <!--此处error类将始终应用，active类将根据isActive的真假来控制是否应用-->

        <div :class="[isActive ? activeCls : '',errorCls]"></div>

    </div>

    <script>

        var app=new Vue({

            el:'#app',

            data:{

                isActive:true,

                activeCls:'active',

                errorCls:'error'

            }

        })

    </script>

</body>

</html>

三元表达式虽然可以动态控制class类是否应用，但是写起来比较复杂，为了在数组绑定法中能够动态控制class的应用与否我们还可以利用上面的对象绑定法，在数组绑定法中嵌套使用对象绑定法，如下示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <title>Vue 示例</title>

</head>

<body>

    <div id="app">

        <div :class="[{'active':isActive},errorCls]"></div>

    </div>

    <script>

        var app=new Vue({

            el:'#app',

            data:{

                isActive:true,

                errorCls:'error'

            }

        })

    </script>

</body>

</html>

与对象绑定法一样，我们也可以在数组绑定法中使用计算属性来绑定class类，如下示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <title>Vue 示例</title>

</head>

<body>

    <div id="app">

        <div :class="classes"></div>

    </div>

    <script>

        var app=new Vue({

            el:'#app',

            data:{

                size:'large',

                disabled:true

            },

            computed:{

                classes:function() {
                    <!--此处btn类始终应用，由于size值为large不为空，根据字符串拼接btn-large类被应用，当disabled为真时，btn-disabled类被应用-->

                    return ['btn',{['btn-'+this.size]:this.size !='',['btn-disabled']:this.disabled}]

                }

            }

        })

    </script>

</body>

</html>

2.3、组件绑定

我们可以在自定义Vue组件时在组件上应用class类，然后在调用该组件时再使用对象绑定法或数组绑定法在组件上继续绑定新的class类，在调用组件时绑定class类的方法只有当组件最外层是根元素才有效，如下示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <script>Vue.component('my-component',{template:'<p class='article'>自定义组件</p>'})；</script>

    <title>Vue 示例</title>

</head>

<body>

    <div id="app">

        <my-component:class="[activeCls,errorCls]"></my-component>

    </div>

    <script>

        var app=new Vue({

            el:'#app',

            data:{

                activeCls:'active',

                errorCls:'error'

            }

        })

    </script>

</body>

</html>

3、绑定内联样式

v-bind绑定内联样式的方法与绑定class类名的方法一致，也是使用对象绑定法和数组绑定法，其中对象绑定法在绑定内联样式时较为常用，另外还有计算属性在绑定内联样式时也较为常用，如下示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <title>Vue 示例</title>

</head>

<body>

    <div id="app">
        <!--v-bind渲染内联样式的语法糖为:style,此处渲染后的效果为<div style="color:red;font-size:14px;">文本</div>-->

        <div :style="styles">文本</div>

    </div>

    <script>

        var app=new Vue({

            el:'#app',

            data:{
                <!--css属性名称使用驼峰命名或短横分隔命名-->

                styles:{

                    color:'red',

                    fontSize:14+'px'

                }

            }

        })

    </script>

</body>

</html>

Vue基础第四章 - v-bind指令的更多相关文章

  1. Vue基础（环境配置、内部指令、全局API、选项、内置组件）

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  2. JAVA基础第四章-集合框架Collection篇

    业内经常说的一句话是不要重复造轮子,但是有时候,只有自己造一个轮子了,才会深刻明白什么样的轮子适合山路,什么样的轮子适合平地! 我将会持续更新java基础知识,欢迎关注. 往期章节: JAVA基础第一 ...

  3. Vue.js-02：第二章 - 常见的指令的使用

    一.前言 在上一章中,我们了解了一些在使用 Vue 进行开发中经常会遇到的基础概念,与传统的前端开发不同,Vue 可以使我们不必再使用 JavaScript 去操作 DOM 元素(还是可以用,但是极度 ...

  4. Vue基础第三章 - 计算属性

    1.计算属性介绍 在第二章中我们介绍了在Vue的{{}}中可以使用一些简单的表达式进行计算,但是当表达式过长或者逻辑过于复杂就会变得不易理解和维护,比如第二章的示例{{ text.split(',') ...

  5. java基础（四章）

    一.             switch结构(开关语句)的语法 switch(表达式 ){ ------- [dream1]类型为int.char case  常量1 :    ---------[ ...

  6. Python基础 第四章 字典（2）字典方法&章小结

    1. clear 方法clear删除所有的字典项,就地执行,什么都不返回(或者说返回None) d = {} d['name'] = 'Gumby' d['age'] = 42 print(d) re ...

  7. Python基础 第四章 字典（1）

    通过名称来访问其各个值的数据结构,映射(mapping). 字典,是Python中唯一的内置映射类型,其中的值不按顺序排列,而是存储在键下.(键,可能是数.字符串.元组). 1.1 字典由 键 及其相 ...

  8. jQuery Mobile 基础(第四章）

    1.主题 jQuery Mobile 提供了5种不同的主题样式, 从 "a" 到 "e" - 每一种主题的按钮,工具条,内容块等等颜色都不一致,每个主题的视觉效 ...

  9. v:bind指令对于传boolean值的注意之处

    1,

随机推荐

  1. redhat下配置SEED DVS6446开发环境1

    Linux NFS服务详解   1.什么是NFS(Network FileSystem)  NFS 就是 Network FileSystem 的缩写,最早之前是由 Sun 所发展出来的.他最大的 功 ...

  2. Java学习之==>集合体系（待续。。）

    一.概述 Java的集合体系,本质上是一个陈放数据的容器,像之前学过的数组也是陈放数据的容器,但在 Java 中数组的长度是固定的,使用起来没那么方便.集合提供了更加强大的功能,使用起来也更方便和快捷 ...

  3. Spring AOP junit错误整理

    1.[spring][Xlint:invalidAbsoluteTypeName]error 首先说一下最基本的错误,使用AOP的pointcut的expression表达式必须是正确的,表达式规则相 ...

  4. CTF—WEB—sql注入之宽字节注入

     宽字节注入 宽字节注入是利用mysql的一个特性,mysql在使用GBK编码(GBK就是常说的宽字节之一,实际上只有两字节)的时候,会认为两个字符是一个汉字(前一个ascii码要大于128,才到汉字 ...

  5. java带图形界面的五子棋

    Main: package BlackWhite; import java.awt.BorderLayout; import java.awt.Color; import java.awt.FlowL ...

  6. DataGridViewCheckBoxColumn的Value值和EditFormatedValue值不一致

    今天要做一个代码修改DataGridViewCheckBoxColumn的Value值然后再遍历获取DataGridview选中项,因为遍历的时候为了能获取跟界面一致的选项,所以判断是否选中使用的是E ...

  7. mysql-jdbc connector

    mysql-jdbc connector: https://dev.mysql.com/downloads/connector/j/ 目录: /usr/share/java/mysql-connect ...

  8. abp.event.on与abp.event.off使用

    apb的全局事件 var eventName = "app.createOrEditFieldModalSaved"; var reloadPage = function () { ...

  9. Spring MVC 中使用AOP 进行事务管理--注解实现

    注解实现实现事务管理很简单,和配置式差不多,配置文件的头文件也要加相应的支持.配置数据源,并开启事务管理支持即可. <bean id="transactionManager" ...

  10. 快速安装create-react-app脚手架

    create-react-app搭建react项目:https://blog.csdn.net/weixin_41077029/article/details/82622106 快速安装create- ...