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

它是一个 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. sqli-labs level 2

    来到第第二关 首先在后面添加一个 单引号看下报错信息 发现这里多多了一个引号  尝试去掉单引号看下回显结果   :    and 1=2 可以发现这里不需要添加单引号进行闭合,可以直接控制,所以接下来 ...

  2. 洛谷 P4391 [BOI2009]Radio Transmission 无线传输

    题目传送门 解题思路: 本题所要求的循环节,其实就是最长公共前缀的前缀长度减去前后缀重叠的一部分 AC代码: #include<iostream> #include<cstdio&g ...

  3. DBlink查看，创建于删除

    1.查看dblink select owner,object_name from dba_objects where object_type='DATABASE LINK'; 或者 select * ...

  4. spring-boot-autoconfigure-xx.jar核心注解

  5. Verilog 2001 `default_nettype none

    在Verilog 1995規定,對於沒宣告的信號會自動視為wire,這樣常常造成debug的困難,Verilog 2001另外定義了`default_nettype none,將不再自動產生wire. ...

  6. 《机学五》KNN算法及实例

    一.概述 [定义]如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类别. 二.距离计算公式 两个样本的距离可以通过如下公式计算,又叫[欧式距 ...

  7. 《分布式消息中间件实践》P153

    问题:我直接把作者的源码拷贝下来(包括xml,resource等,作者应该使用的是Eclipse,我复制到IDEA上),依赖加上.执行P153的步骤,报错如下: Exception in thread ...

  8. POJ1723 SOLDIERS 兄弟连

    SOLDIERS 有一个性质:在一个长为n的序列a中找一个数 \(a_k\) 使得 \(\sum\limits_{i=1}^n abs(a_i-a_k)\) 最小,则 \(a_k\) 是a的中位数. ...

  9. P1081 检查密码

    P1081 检查密码 转跳点:

  10. P1002 写出这个数(Basic Level)

    转跳点: