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

它是一个 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. firewalld学习-zone的使用和配置

    原文地址:http://www.excelib.com/article/290/show zone文件标签名词解释 target:目标,这个前面学生也已经给大家介绍过了,可以理解为默认行为,有四个可选 ...

  2. 第1节 IMPALA：2、架构介绍

    impala的架构以及查询计划: impalad :从节点 对应启动一个impala-server的进程 ,主要负责各种查询计划,官方建议与所有的datanode安装在同一台机器上面 impala-s ...

  3. swagger获取

    参考 https://www.jianshu.com/p/840320d431a1 https://www.cnblogs.com/luoluocaihong/p/7106276.html

  4. 08.swoole学习笔记--异步tcp客户端

    <?php //创建异步tcp客户端 $client=new swoole_client(SWOOLE_SOCK_TCP,SWOOLE_SOCK_ASYNC); //注册连接成功的回调函数 $c ...

  5. gem5-gpu 选项解释

    ‘--split’ ,该项用于模拟独立显卡,GPU与CPU不在同一芯片上,两者的内存物理上隔绝,使用PCI-Express连接. ‘--access-host-pagetable’,该项用于模拟集成显 ...

  6. ROS-1 : Ubuntu16.04中安装ROS Kinetic

    1.安装 ROS Kinetic仅支持Wily(Ubuntu 15.10).Xenial( Ubuntu16.04)和Jessie(Debian 8)的debian软件包. 1.1 配置Ubuntu ...

  7. 微信扫码登陆（JAVA）

    在web端用到weChat扫码登录,在手机扫码登陆成功后,跳转到相应的界面. 1.第一步请求code 调用接口:https://open.weixin.qq.com/connect/qrconnect ...

  8. JAVA Main方法中调用非静态方法

    在JAVA中静态方法中只能调用其他,静态方法.main方法都是静态方法,如果想调用其它的方法,要么只能是其它的静态方法.还有一种方法就是将当前类实例化在调用它的非静态方法 public class t ...

  9. Django（五）1 - 4章实战：从数据库读取图书列表并渲染出来、通过url传参urls.py path,re_path通过url传参设置、模板语法

    一.从数据库读取图书数据并渲染出来 1)app1/views.py函数books编写 [1]从模型下导入bookinfo信息 [2]从数据库获取图书对象列表 [3]把获取到的图书对象赋值给books键 ...

  10. Linux学习《第四章shell脚本练习一》随堂练习（重要）