指令作用： 给元素的属性赋值

它是一个 vue 指令，用于绑定 html 属性

写法：

正常写法     <div v-bind:原属性名="变量||"常量""></div> // 注意常量要引号内加引号

简写        <div :属性名="变量"></div>

///1  绑定class  支持直接变量 数组 对象（判断是否显示）

Vue中的样式数据绑定 // class的对象绑定 对象绑定键值对。value为绑定的值（控制是否显示）。key直接是字符串的css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cssVariable {
            color: red;
        }
        .font {
            font-size: 40px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app-2">
    <article :class="{cssVariable: variableToggle,font:variableToggle}">test</article>
</div>

<script>
    var app2 = new Vue({
        el: '#app-2',
        data: {
        variableToggle: true
        }
    })
</script>
</body>
</html>

class的数组绑定（动态在dom上添加删除类，从而实现页面效果的变更）数组绑定的就是css样式类名 的变量（绑定在data）

同时支持data   ['cssVariable', 'font']

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cssVariable {
            color: red;
        }
        .font {
            font-size: 40px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app-2">
    <article :class="[cssVariable]">test</article>
</div>

<script>
    var app2 = new Vue({
        el: '#app-2',
        data: {
            cssVariable:'cssVariable', //['cssVariable', 'font']
        variableToggle: true
        }
    })
</script>
</body>
</html>

///2  绑定style  支持直接变量 数组 对象（对象的键为css属性名字，value为绑定的变量）

style内联样式绑定（对象/数组）

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>  //此处写法有误

data: {

  activeColor: 'red',

  fontSize: 30

}

<div v-bind:style="styleObject"></div>

data: {

  styleObject: {

    color: 'red',

    fontSize: '13px'

  }

}

//数组

<div v-bind:style="[baseStyles, overridingStyles]"></div>

//v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上

Vue v-bind的更多相关文章

  1. v - bind

    1. 用于处理html标签的动态属性,即动态赋值(动态地绑定一个或多个特性,或一个组件 prop 到表达式) 2. 官网API <!DOCTYPE html> <html lang= ...

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

    1,

  3. vue组件详解（二）——使用props传递数据

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅 ...

  4. vue组件详解——使用props传递数据

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...

  5. vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  6. 简单的springboot + vue

    安装vue 脚手架 npm install -g @vue/cli 查看vue 版本 vue -V 创建vue项目 vue create vue_project Vue CLI v4.5.13? Pl ...

  7. 第六十五篇：Vue的过滤器

    好家伙, 过滤器,vue3取消了,只有vue2能用 1.过滤器 过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化. 过滤器可以用在两个地方:插值表达式和v-bind属性绑定. 过 ...

  8. vue.js在windows本地下搭建环境和创建项目

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  9. 更新补丁Bind

    1.查询补丁版本信息 (1) rpm -qa|grep bind (2) dig @localhost version.bind 2.下载安装 BIND最新漏洞和升级解决办法 现在有非常多的公司的都有 ...

  10. Bind开启IPv6功能

    [root@localhost sbin]# ./named -v bind 9.5.1-p3-v3.0.9 1,服务器开启IPv6服务 网卡配置v6地址 [root@localhost ~]# if ...

随机推荐

  1. mitmproxy 配置

    pip install mitmproxy Man In The Middle 原理 mitmproxy工程工具包,主要包含了3个组件 功能一致,交互界面不同 mitmproxy:命令行界面,wind ...

  2. 条件判断语句（if-else）

    if-else 语法 if-else 语法,只有一个语句块被执行 if 和 else都是Java中的关键字 if 语法 把 if-else 看做一个表达式,程序整体还是顺序执行的 if (boolea ...

  3. 调用dos

    两个方法 function RunDosCommand(Command: string): string; var hReadPipe: THandle; hWritePipe: THandle; S ...

  4. JAVA面试题0 JAVA语言的基本知识

    JAVA语言的特点是什么? >面向对象:两个基本概念:类和对象:三大基本特性:封装.继承.多态: >健壮性:java吸收了C/C++的优点,但是去掉了它们影响健壮性的部分,例如指针和内存申 ...

  5. UVA 1601 双向BFS

    但是我们还不是很清楚每一次的状态怎么储存?我们可以用一个结构体,将每次的位置存起来,但是这个程序中用了一个更好的储存方法:我们知道最大的格数是16*16个,也就是256个,那么我们转换为二进制表示就是 ...

  6. poj 1318 Word Amalgamation

    Word Amalgamation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9968   Accepted: 4774 ...

  7. python基础数据类型--元组（tuple）

    python基础数据类型--元组(tuple) 一.元组的定义和特性 定义:与列表相似,只不过就是将[ ] 改成 ( ) 特性:1.可以存放多个值 2.不可变 3.按照从左到右的顺序定义元组元素,下标 ...

  8. 转载-- SQL连接查询2 外连接（左右联接查询）

    http://www.cnblogs.com/zhangqs008/archive/2010/07/02/2341196.html 外连接主要包括左连接.右连接和完整外部连接. 1)左连接:Left ...

  9. 通过fiddler修改通讯返回值

      1 在fiddler里选中url,右键unlock for editing 2 在fiddler里点击url, 在右面的返回值的 TextView 项里修改数据 3 取消 unlock for e ...

  10. yum对于包和软件的安装、升级和卸载总结

    在Centos下yum的安装.升级和卸载 一.使用yum安装和卸载软件,有个前提是yum安装的软件包都是rpm格式的.安装的命令是,yum install ~,yum会查询数据库,有无这一软件包,如果 ...