Vue基础第四章 - v-bind指令
1、v-bind指令介绍
在前端开发过程中最常做的事莫过于class类名的绑定与style内联样式的修改，Vue中使用v-bind指令来实现这两个需求，在第二章中给出过简单的示例，下面我们来看一下v-bind指令的具体用法。
2、绑定class类名的三种方法
2.1、对象绑定法
所谓对象就是类似Python中的字典，以键值对的形式来动态控制一个class是否加载，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<title>Vue 示例</title>
</head>
<body>
<div id="app1">
<!--:class等价于v-bind:class,:class可以与普通class同时存在，此处通过：class的对象中的isActive和isError的值来控制active和error类是否加载，最后的渲染结果为<div class="static active"></div>-->
<div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>
<script>
var app1=new Vue({
el:'#app1',
data:{
isActive:true,
isError:false
}
});
</script>
</body>
</html>
当对象中的class类较多时，可以使用计算属性或methods属性来绑定，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<title>Vue 示例</title>
</head>
<body>
<div id="app1">
<div class="static" :class="classes"></div>
</div>
<script>
var app1=new Vue({
el:'#app1',
data:{
isActive:true,
isError:false
},
computed:{
classes:function() {
return {active:this.isActive ,error:this.isError}
}
}
});
</script>
</body>
</html>
2.2、数组绑定法
数组绑定法就是给:class绑定一个数组，将data属性中的class类名引用到数组中，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<!--经过渲染后active和error类会被应用到div标签上-->
<div :class="[activeCls,errorCls]"></div>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
activeCls:'active',
errorCls:'error'
}
})
</script>
</body>
</html>
使用数组绑定法时可以通过三元表达式来动态控制class类是否应用，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<!--此处error类将始终应用，active类将根据isActive的真假来控制是否应用-->
<div :class="[isActive ? activeCls : '',errorCls]"></div>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
isActive:true,
activeCls:'active',
errorCls:'error'
}
})
</script>
</body>
</html>
三元表达式虽然可以动态控制class类是否应用，但是写起来比较复杂，为了在数组绑定法中能够动态控制class的应用与否我们还可以利用上面的对象绑定法，在数组绑定法中嵌套使用对象绑定法，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<div :class="[{'active':isActive},errorCls]"></div>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
isActive:true,
errorCls:'error'
}
})
</script>
</body>
</html>
与对象绑定法一样，我们也可以在数组绑定法中使用计算属性来绑定class类，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<div :class="classes"></div>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
size:'large',
disabled:true
},
computed:{
classes:function() {
<!--此处btn类始终应用，由于size值为large不为空，根据字符串拼接btn-large类被应用，当disabled为真时，btn-disabled类被应用-->
return ['btn',{['btn-'+this.size]:this.size !='',['btn-disabled']:this.disabled}]
}
}
})
</script>
</body>
</html>
2.3、组件绑定
我们可以在自定义Vue组件时在组件上应用class类，然后在调用该组件时再使用对象绑定法或数组绑定法在组件上继续绑定新的class类，在调用组件时绑定class类的方法只有当组件最外层是根元素才有效，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>Vue.component('my-component',{template:'<p class='article'>自定义组件</p>'})；</script>
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<my-component:class="[activeCls,errorCls]"></my-component>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
activeCls:'active',
errorCls:'error'
}
})
</script>
</body>
</html>
3、绑定内联样式
v-bind绑定内联样式的方法与绑定class类名的方法一致，也是使用对象绑定法和数组绑定法，其中对象绑定法在绑定内联样式时较为常用，另外还有计算属性在绑定内联样式时也较为常用，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<!--v-bind渲染内联样式的语法糖为:style,此处渲染后的效果为<div style="color:red;font-size:14px;">文本</div>-->
<div :style="styles">文本</div>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
<!--css属性名称使用驼峰命名或短横分隔命名-->
styles:{
color:'red',
fontSize:14+'px'
}
}
})
</script>
</body>
</html>
Vue基础第四章 - v-bind指令的更多相关文章
- Vue基础（环境配置、内部指令、全局API、选项、内置组件）
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- JAVA基础第四章-集合框架Collection篇
业内经常说的一句话是不要重复造轮子,但是有时候,只有自己造一个轮子了,才会深刻明白什么样的轮子适合山路,什么样的轮子适合平地! 我将会持续更新java基础知识,欢迎关注. 往期章节: JAVA基础第一 ...
- Vue.js-02：第二章 - 常见的指令的使用
一.前言 在上一章中,我们了解了一些在使用 Vue 进行开发中经常会遇到的基础概念,与传统的前端开发不同,Vue 可以使我们不必再使用 JavaScript 去操作 DOM 元素(还是可以用,但是极度 ...
- Vue基础第三章 - 计算属性
1.计算属性介绍 在第二章中我们介绍了在Vue的{{}}中可以使用一些简单的表达式进行计算,但是当表达式过长或者逻辑过于复杂就会变得不易理解和维护,比如第二章的示例{{ text.split(',') ...
- java基础（四章）
一. switch结构(开关语句)的语法 switch(表达式 ){ ------- [dream1]类型为int.char case 常量1 : ---------[ ...
- Python基础 第四章 字典（2）字典方法&章小结
1. clear 方法clear删除所有的字典项,就地执行,什么都不返回(或者说返回None) d = {} d['name'] = 'Gumby' d['age'] = 42 print(d) re ...
- Python基础 第四章 字典（1）
通过名称来访问其各个值的数据结构,映射(mapping). 字典,是Python中唯一的内置映射类型,其中的值不按顺序排列,而是存储在键下.(键,可能是数.字符串.元组). 1.1 字典由 键 及其相 ...
- jQuery Mobile 基础(第四章）
1.主题 jQuery Mobile 提供了5种不同的主题样式, 从 "a" 到 "e" - 每一种主题的按钮,工具条,内容块等等颜色都不一致,每个主题的视觉效 ...
- v:bind指令对于传boolean值的注意之处
1,
随机推荐
- php实现：当未登录时转到登陆页面
判断session是否存在,不存在则跳转到登录页面session_start(); if ( !$_SESSION['xxx'] ) { header("Location: login ...
- 使用Android自带的资源
Android自带的资源文件有 :https://developer.android.google.cn/reference/android/R.html 代码中使用如下: 1.查看源代码的资源文件 ...
- 取长文本 READ_TEXT
****取长文本 FORM GET_TEXT USING TDID TDNAME. SELECT SINGLE mandt tdobject tdname tdid tdspras INTO ...
- IK分词器的安装与使用IK分词器创建索引
之前我们创建索引,查询数据,都是使用的默认的分词器,分词效果不太理想,会把text的字段分成一个一个汉字,然后搜索的时候也会把搜索的句子进行分词,所以这里就需要更加智能的分词器IK分词器了. 1. i ...
- C#学习笔记四（LINQ，错误和异常，异步编程，反射元数据和动态编程）
LINQ 1.使用类似的数据库语言来操作集合? 错误和异常 异步编程 1.异步和线程的区别: 多线程和异步操作两者都可以达到避免调用线程阻塞的目的.但是,多线程和异步操作还是有一些区别的.而这些区别造 ...
- cocos2dx[3.2](3) 浅析CCDeprecated.h
CCDeprecated.h中存放的都是2.x将要被抛弃的命名规范,主要包含类名.枚举类型. 虽然说2.x的这些命名规范被CCDeprecated.h保留了.但是为了彻底学习3.x的新特性,就必须要尽 ...
- linux 设备树中 dwc3 节点的phys参数含义
找了好久今天找到了,记录一下: &dwc3_0 { ... phys = <&lane3 PHY_TYPE_USB3 1 2 26000000>; ... } Requir ...
- JAVA 编程思想一
1: 动态绑定和静态绑定 使用private或static或final修饰的变量或者方法,使用静态绑定.而虚方法(可以被子类重写的方法)则会根据运行时的对象进行动态绑定: 静态绑定使用类信息来完成,而 ...
- C++ 全局变量 静态变量 全局函数 静态函数
1. static 变量 静态变量的类型 说明符是static. 静态变量当然是属于静态存储方式,但是属于静态存储方式的量不一定就是静态变量. 例如外部变量虽属于静态存储方式,但不一定是静态变量,必须 ...
- 11、权重残差图、RLE和NUSE
affyPLM包可以对芯片原始数据进行拟合回归,最后得到芯片权重(Weights)残差(Residuals)图.相对对数表达(RLE,Relative log expression)箱线图.相对标准差 ...