1、v-bind指令介绍

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

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

2.1、对象绑定法

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  6.     <title>Vue 示例</title>
  7. </head>
  8. <body>
  9.     <div id="app1">
    　　　　 <!--:class等价于v-bind:class,:class可以与普通class同时存在，此处通过：class的对象中的isActive和isError的值来控制active和error类是否加载，最后的渲染结果为<div class="static active"></div>-->
  10.         <div class="static" :class="{'active':isActive,'error':isError}"></div>
  11.     </div>
  12.     <script>
  13.         var app1=new Vue({
  14.             el:'#app1',
  15.             data:{
  16.                 isActive:true,
  17.                 isError:false
  18.             }
  19.         });
  20.     </script>
  21. </body>
  22. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  6.     <title>Vue 示例</title>
  7. </head>
  8. <body>
  9.     <div id="app1">
  10.         <div class="static" :class="classes"></div>
  11.     </div>
  12.     <script>
  13.         var app1=new Vue({
  14.             el:'#app1',
  15.             data:{
  16.                 isActive:true,
  17.                 isError:false
  18.             },
  19.             computed:{
  20.                 classes:function() {
  21.                     return {active:this.isActive ,error:this.isError}
  22.                 }
  23.             }
  24.         });
  25.     </script>
  26. </body>
  27. </html>

2.2、数组绑定法

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  6.     <title>Vue 示例</title>
  7. </head>
  8. <body>
  9.     <div id="app">
            <!--经过渲染后active和error类会被应用到div标签上-->
  10.         <div :class="[activeCls,errorCls]"></div>
  11.     </div>
  12.     <script>
  13.         var app=new Vue({
  14.             el:'#app',
  15.             data:{
  16.                 activeCls:'active',
  17.                 errorCls:'error'
  18.             }
  19.         })
  20.     </script>
  21. </body>
  22. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  6.     <title>Vue 示例</title>
  7. </head>
  8. <body>
  9.     <div id="app">
            <!--此处error类将始终应用，active类将根据isActive的真假来控制是否应用-->
  10.         <div :class="[isActive ? activeCls : '',errorCls]"></div>
  11.     </div>
  12.     <script>
  13.         var app=new Vue({
  14.             el:'#app',
  15.             data:{
  16.                 isActive:true,
  17.                 activeCls:'active',
  18.                 errorCls:'error'
  19.             }
  20.         })
  21.     </script>
  22. </body>
  23. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  6.     <title>Vue 示例</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <div :class="[{'active':isActive},errorCls]"></div>
  11.     </div>
  12.     <script>
  13.         var app=new Vue({
  14.             el:'#app',
  15.             data:{
  16.                 isActive:true,
  17.                 errorCls:'error'
  18.             }
  19.         })
  20.     </script>
  21. </body>
  22. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  6.     <title>Vue 示例</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <div :class="classes"></div>
  11.     </div>
  12.     <script>
  13.         var app=new Vue({
  14.             el:'#app',
  15.             data:{
  16.                 size:'large',
  17.                 disabled:true
  18.             },
  19.             computed:{
  20.                 classes:function() {
                        <!--此处btn类始终应用，由于size值为large不为空，根据字符串拼接btn-large类被应用，当disabled为真时，btn-disabled类被应用-->
  21.                     return ['btn',{['btn-'+this.size]:this.size !='',['btn-disabled']:this.disabled}]
  22.                 }
  23.             }
  24.         })
  25.     </script>
  26. </body>
  27. </html>

2.3、组件绑定

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  6.     <script>Vue.component('my-component',{template:'<p class='article'>自定义组件</p>'})；</script>
  7.     <title>Vue 示例</title>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <my-component:class="[activeCls,errorCls]"></my-component>
  12.     </div>
  13.     <script>
  14.         var app=new Vue({
  15.             el:'#app',
  16.             data:{
  17.                 activeCls:'active',
  18.                 errorCls:'error'
  19.             }
  20.         })
  21.     </script>
  22. </body>
  23. </html>

3、绑定内联样式

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  6.     <title>Vue 示例</title>
  7. </head>
  8. <body>
  9.     <div id="app">
            <!--v-bind渲染内联样式的语法糖为:style,此处渲染后的效果为<div style="color:red;font-size:14px;">文本</div>-->
  10.         <div :style="styles">文本</div>
  11.     </div>
  12.     <script>
  13.         var app=new Vue({
  14.             el:'#app',
  15.             data:{
                    <!--css属性名称使用驼峰命名或短横分隔命名-->
  16.                 styles:{
  17.                     color:'red',
  18.                     fontSize:14+'px'
  19.                 }
  20.             }
  21.         })
  22.     </script>
  23. </body>
  24. </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. 浏览器端-W3School-HTML：HTML DOM Select 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Select 对象 1.返回顶部 1. HTML DOM Select 对象 Select 对象 Select 对象代表 HTM ...

  2. sun.misc.BASE64Encoder 不建议使用java.sun自带包中的内容

    import sun.misc.BASE64Decoder; 在项目中,设计到64位编码的.有时开发会用到JDK中自带的BASE64工具.但sun公司是建议不这样做的.尤其是更新了JDK版本,项目甚至 ...

  3. redhat下配置SEED DVS6446开发环境2

    ---恢复内容开始--- 1.rpcbind步骤  linux包:portmap安装包 libgssglue-0.1-8.1.el6.i686.rpm libtirpc-0.2.1-1.el6.i68 ...

  4. Libvirt Live Migration 与 Pre-Copy 实现原理

    目录 文章目录 目录 Libvirt 的 Live Migration 网络数据传输层 控制层 通过 libvirt 库实现虚拟机迁移的示例 KVM 的预拷贝(Pre-Copy)Live Migrat ...

  5. 113路径总和II

    题目: 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 来源: https://leetcode-cn.com/problems/path-sum-ii/ 法一: ...

  6. Hibernate框架 初识 ORM概念

    Hibernate概述 Hibernate是一个ORM(对象关系映射)映射框架,它的核心思想就是在底层对JDBC进行了一次封装. 什么是框架 IT语境中的框架,特指为解决一个开放性问题而设计的具有一定 ...

  7. Express全系列教程之(十一)：渲染ejs模板引擎

    一.简介 相比于jade模板引擎,ejs对原HTML语言就未作出结构上的改变,只不过在其交互数据方面做出了些许修改,相比于jade更加简单易用.因此其学习成本是很低的.您也可参考ejs官网:https ...

  8. 基于LVM（逻辑卷管理）的快照原理

    一.为甚么不管多大的逻辑卷进行备份,快照都会在几秒之内完成? 快照在拍摄的一瞬间,系统会记录那个时间点逻辑卷的状态.数据等,此时拍下的快照相当于一张白纸.如图所示 快照做好后,随着时间的推移,源卷里的 ...

  9. [深度概念]·Attention Model（注意力模型）学习笔记

    此文源自一个博客,笔者用黑体做了注释与解读,方便自己和大家深入理解Attention model,写的不对地方欢迎批评指正.. 1.Attention Model 概述 深度学习里的Attention ...

  10. 【VS开发】循序渐进学习使用WINPCAP（一）

    winpcap教程 中文教程 http://www.ferrisxu.com/WinPcap/html/index.html 除此之外, WinPcap · Developer Resources下载 ...