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

它是一个 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. linux下python开发环境的安装

    1.准备编译环境 yum groupinstall 'Development Tools' yum install zlib-devel bzip2-devel openssl-devel ncurs ...

  2. Linux间传输文件 scp

    scp scp使用ssh来传输数据,使用相同的认证方式,所以配置好ssh后,根据用户名和密码来读写远程文件.基本命令如下,输完命令,回车,输入远程用户对应的密码: 从本机复制到远程: 文件:scp F ...

  3. flower——知识总结

    创建主外键关联的话,外键表的外键字段一定要与主键表的主键字段相一致,包括字段类型,字段长度,字段符号等等 inverse="true" 将控制权交给对方,在一对多的关系中,一端控制 ...

  4. Qt编写的项目作品2-控件属性设计器(组态)

    一.功能特点 自动加载插件文件中的所有控件生成列表,默认自带的控件超过120个. 拖曳到画布自动生成对应的控件,所见即所得. 右侧中文属性栏,改变对应的属性立即应用到对应选中控件,直观简洁,非常适合小 ...

  5. 吴裕雄--天生自然java开发常用类库学习笔记：Arrays

    import java.util.* ; public class ArraysDemo{ public static void main(String arg[]){ int temp[] = {3 ...

  6. local feature和global feature的理解

    在计算机视觉方面,global feature是基于整张图像提取的特征,也就是说基于all pixels,常见的有颜色直方图.形状描述子.GIST等:local feature相对来说就是基于局部图像 ...

  7. 20190108PLC学习心得

    应该是数据类型不对 F1查看了帮助文件以后 ,看到 LD应该是用指针类型的数据 改正以后 LD0下的红线消失了 .       绿色 代表没有给 符号 定义 地址     假设 我现在给 符号 字节数 ...

  8. HDU - 1087 Super Jumping! Jumping! Jumping!（dp）

    题意:从起点依次跳跃带有数字的点直到终点,要求跳跃点上的数字严格递增,问跳跃点的最大数字和. 分析: 1.若之前的点比该点数字小,则可进行状态转移,dp[i] = max(dp[i], dp[j] + ...

  9. 【测试】性能测试及性能测试工具Loadrunner

    性能测试简介 软件系统的性能包括很多方面,有执行效率,资源占用,系统稳定性,安全性,兼容性,可靠性,可扩展性等.这些都是可以衡量一个软件系统性能好坏的指标.而性能测试是指通过自动化测试工具去模拟多种正 ...

  10. 滑条滚动发请求要用Debounce

    import debounce from 'lodash.debounce'; this.deboucedFunc = debounce(this.viewModel.v_onHomeworkRequ ...