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

它是一个 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. 恒大与FF终达成和解！谁赢了，谁输了？

    去年11月结束的中超,广州恒大以63分的积分落后上海上港5分,排在第二名的位置.恒大恒可惜地没有创造史无前例的联赛八连冠,与新的亚洲纪录失之交臂.但相比球场上的"失意",许家印在商 ...

  2. Tasks、 activity 及 activity stack - 人间奇迹（转）

      http://www.cnblogs.com/yaozhongxiao/p/3365345.html Activity之间的跳转,或者说加载一个新的Activity,一般对于开发者来说,都不是一个 ...

  3. Day4 - G - 确定比赛名次 HDU - 1285

    有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排名,但现在裁判委员会不能直接获得每个队的比赛成绩,只知道 ...

  4. gitbook简单教程

    简介 GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown 来制作精美的电子书.GitBook支持输出以下几种文档格式 静态站点:GitBook ...

  5. 【SQL必知必会笔记(3)】SELECT语句的WHERE子句数据过滤操作

    上个笔记主要介绍了利用SELECT语句检索单个/多个/所有列,并利用DISTINCT关键字检索具有唯一性的值.利用LIMIT/OFFSET子句限制结果:以及利用ORDER BY子句排序检索出的数据,主 ...

  6. 5.Linux解决Device eth0 does not seem to be present

    Linux操作系统排除故障 导入vixualbox的虚拟机voa文件到另外一台电脑,需要检查如下信息 修改虚拟机软件网络设置 重启Linux操作系统 shutdown -h now reboot se ...

  7. C语言备忘录——static

    对于这个关键字我一直没有弄清楚,今天特地去花了一定的时间去理解这个关键字.在函数或变量声明时,在数据类型前加上 static 后会有以下几个效果 一.用于函数定义时: 1.函数的链接属性会被修改,从e ...

  8. node - 获取当前时间并格式化

    1,安装 moment模块 cnpm i moment --save 2,引入 var moment = require('moment'); 3,获取当前时间并格式化 var current_tim ...

  9. Oracle-SQL 小题

    1.查询姓名中不包含C和c的员工信息 ; ①字符函数 instr(input,char,m,n) 的用法:返回在字符值中查找字符串char的数字位置.参数m作为查找的开始,参数n代表第n次发现.m和n ...

  10. unicode字符等价探究

    Demobaidu.com(\uff41)能跳转到baidu.combаidu.com(\u0430)不能跳转到baidu.com,被认为成一个其他域名 等价原因两个不同编码的Unicode字符之间可 ...