Vue语法学习第四课(2)——class与style的绑定
之前学到的指令 v-bind 在用于绑定class和style时,表达式结果可以是字符串、数组、对象。
一、绑定HTMLClass
① 对象语法
<div class="static" v-bind:class="{active : isActive, 'text-danger' : hasEorro}"></div>
data:{
isActive : true ,
hasEorro : false
}
渲染结果为:
<div class="static active " ></div>
注:当v-bind:class的表达式的值为 false,0,""(空字符串),null,undefined,NaN(Not a number) 时在JavaScript中为布尔值的假,即falsy,此时不会渲染
上述的例子可以写成:
<div class="static" v-bind:class="classObject"></div>
data : {
classObject : {
active : true,
'text-danger' : false
}
}
还可以绑定一个返回对象的计算属性(常用且强大):
<style>
.redborder{
border : 1px solid red
}
.yellowbackground{
background-color : yellow
}
</style>
<div id="app0">
<input type="text" v-model="myname"/>
<p v-bind:class="pclass">
my name is : {{myname}}
</p>
</div>
<script>
var vm = new Vue({
el:"#app0",
data:{
myname : "zxq",
pclass : {
yellowbackground: 1,
redborder : true
}
}
});
</script>
② 数组语法
同理,也可以用数组一次性绑定多个class
<div v-bind:class="[activeClass,errorClass]"></div>
data:{
activeClass : 'active',
errorClass : 'text-danger'
}
③ 用于组件
当在一个自定义组件上绑定class时,这些class将被绑定到组件的根节点上,且原有的class不会被覆盖
Vue.component('my-component',{
template : "<div class='foo bar'>hi</div>"
})
<my-component class='Active text-danger'></my-component>
将会被渲染成
<div class="active text-danger foo bar">hi</div>
同理也可以使用v-bind绑定class
二、绑定style
① 同class,绑定style时也支持对象语法和数组语法
② 当使用v-bind:style时,需要添加浏览器引擎前缀的CSS属性,如transform,Vue.js会自动侦测补全
③ 从2.3.0开始,可以为style绑定中给的属性提供一个包含多个值的数组,常用于提供多个带前缀的值。
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值,如上中,如果浏览器支持不带前缀的flexbox,那么就只会渲染display:flex。
Vue语法学习第四课(2)——class与style的绑定的更多相关文章
- Vue语法学习第四课(1)——组件简单示例
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例. 设法将应用分割成了两个更小的单元.子单元通过 prop 接口与父单元进行了良好的解耦. <div id="ap ...
- Vue语法学习第五课——条件渲染
① v-if .v-else-if .v-else <div v-if="type === 'A'"> A </div> <div v-else-if ...
- Vue语法学习第三课——计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.对于任何复杂逻辑,都应当使用计算属性. <div id="example&qu ...
- Elasticsearch7.X 入门学习第四课笔记---- Search API之(Request Body Search 和DSL简介)
原文:Elasticsearch7.X 入门学习第四课笔记---- Search API之(Request Body Search 和DSL简介) 版权声明:本文为博主原创文章,遵循CC 4.0 BY ...
- Vue语法学习第一课——插值
学习关于Vue的插值语法 ① 文本值 : "Mustache"语法,即双大括号 <span>Message:{{msg}}</span> 注:双大括号中的m ...
- Vue语法学习第二课——指令
指令,是指在Vue中,带有-v前缀的特殊特性 指令特性的值预期是单个JavaScript表达式(v-for例外) <p v-if="seen">看得到</p> ...
- vue.js学习(第一课)
学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...
- Asp.net MVC4高级编程学习笔记-模型学习第四课基架与模型绑定20171027
MVC模型 一.构建基架. MVC中的基架可以为应用程序提供CURD各种功能生成所需要的样板代码.在添加控制器的时候可以选择相应的模板以及实体对象来生成相应的模板代码. 首先定义一个模型类如下所示: ...
- Linux课程学习 第四课
学习必须如蜜蜂一样,采过许多花,这才能酿出蜜来 这月事比较多,每课的笔记都会慢慢补回来的,做事得有始有终 在网络上,人们越来越倾向于传输压缩格式的文件,原因是压缩文件体积小,在网速相同的情况下,传输时 ...
随机推荐
- vue 学习笔记(一)
对于 vue 官网给的教程由浅及深,非常容易上手.我之前有过 react 项目开发经验,对 webpack 打包,脚手架这一类的东西并不陌生.所以也是我上手比较快的原因吧.简单将我在学习 vue 中遇 ...
- 爬虫学习笔记(1)-- 利用Python从网页抓取数据
最近想从一个网站上下载资源,懒得一个个的点击下载了,想写一个爬虫把程序全部下载下来,在这里做一个简单的记录 Python的基础语法在这里就不多做叙述了,黑马程序员上有一个基础的视频教学,可以跟着学习一 ...
- yii DbCriteria相关属性常用方法
$criteria = new CDbCriteria; //函数方式 $criteria->addCondition("id=1"); //查询条件,即where id = ...
- visual studio常用技法相关
(1)查看dll里面包含了那些函数(dumpbin是visual studio内置工具)dumpbin -exports user32.lib (2)#include "stdlib.h&q ...
- gitlab-runner部署
Gitlab在线安装部署参考 一. 环境 系统 版本 备注 Centos 7_64 建议使用4GB RAM和4或8个CPU内核 二. 安装并配置必要的依赖项 a) 在centos ...
- zoj2930
各点向S连推迟的花费,向T连提前的花费,S表示提前,T表示推迟.a推迟b也推迟b往a连INF.最小割后从各点出发,能直接或间接到T的就是必须推迟的,剩下的就是能提前的. #include < ...
- C# interface 的隐式与显示实现及适应范围源码演示
把代码过程中经常用到的一些代码段做个记录,如下的资料是关于C# interface 的隐式与显示实现及适应范围演示的代码. interface IAnimal { void Dog(); } clas ...
- aggregate基础 使用记录
mongoDB中聚合(aggregate)的具体使用 我们可以用$指定字段来表示选定的document的field,另外可以使用$$ROOT来表示选定的document的所有内容(例如:chosenD ...
- git(二) 分支管理
概念 分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没啥影响.不过,在某个时间点,两个平行宇 ...
- Angular2+URL中的 # 引发的思考
1.先分析 # 的作用 1.1. # 的涵义 #代表网页中的位置.其右面的字符就是该位置的标识符.比如,http://www.example.com/index.html#print就代表网页inde ...