之前学到的指令 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的绑定的更多相关文章

  1. Vue语法学习第四课(1)——组件简单示例

    在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例. 设法将应用分割成了两个更小的单元.子单元通过 prop 接口与父单元进行了良好的解耦. <div id="ap ...

  2. Vue语法学习第五课——条件渲染

    ① v-if .v-else-if .v-else <div v-if="type === 'A'"> A </div> <div v-else-if ...

  3. Vue语法学习第三课——计算属性

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.对于任何复杂逻辑,都应当使用计算属性. <div id="example&qu ...

  4. Elasticsearch7.X 入门学习第四课笔记---- Search API之(Request Body Search 和DSL简介)

    原文:Elasticsearch7.X 入门学习第四课笔记---- Search API之(Request Body Search 和DSL简介) 版权声明:本文为博主原创文章,遵循CC 4.0 BY ...

  5. Vue语法学习第一课——插值

    学习关于Vue的插值语法 ① 文本值 : "Mustache"语法,即双大括号 <span>Message:{{msg}}</span> 注:双大括号中的m ...

  6. Vue语法学习第二课——指令

    指令,是指在Vue中,带有-v前缀的特殊特性 指令特性的值预期是单个JavaScript表达式(v-for例外) <p v-if="seen">看得到</p> ...

  7. vue.js学习(第一课)

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  8. Asp.net MVC4高级编程学习笔记-模型学习第四课基架与模型绑定20171027

    MVC模型 一.构建基架. MVC中的基架可以为应用程序提供CURD各种功能生成所需要的样板代码.在添加控制器的时候可以选择相应的模板以及实体对象来生成相应的模板代码. 首先定义一个模型类如下所示: ...

  9. Linux课程学习 第四课

    学习必须如蜜蜂一样,采过许多花,这才能酿出蜜来 这月事比较多,每课的笔记都会慢慢补回来的,做事得有始有终 在网络上,人们越来越倾向于传输压缩格式的文件,原因是压缩文件体积小,在网速相同的情况下,传输时 ...

随机推荐

  1. [转]Google的C++代码规范

    转自:https://blog.csdn.net/freeking101/article/details/78930381 英文版:http://google-styleguide.googlecod ...

  2. (完美)华为Mate8 NXT-TL00的USB调试模式在哪里开启的经验

    每当我们使用pc通过数据线连接上安卓手机的时候,如果手机没有开启usb调试模式,pc则没法成功检测到我们的手机,在一些情况下,我们使用的一些功能比较强的的软件如以前我们使用的一个软件引号精灵,老版本就 ...

  3. Python学习笔记_1

    一.基础知识 1. 基础: 数据结构:常量.变量.元组(列表).字典 数据类型:int float str 算法:分支和循环 面向对象:类.属性.方法 封装.继承.多态 2. python语言的特点: ...

  4. 关于隐式创建vue实例实现简化弹出框组件显示步骤

    我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...

  5. 【Java】【14】从后往前每隔n位加逗号(用于货币)

    1,String类型的数据 /** * @param strValue 待处理的数 * @param num 隔的位数 */ public static String separateStr(Stri ...

  6. C++标准模板库(STL)之Priority_Queue

    1.Priority_Queue的常用用法 priority_queue:优先队列,底层是使用堆来实现的.优先队列中,队首元素一定是当前队列中优先级最高的哪一个. a (优先级3),b(优先级4),c ...

  7. printf()、sprintf()、vprintf()、vsprintf()(转)

    转自http://sumsung753.blog.163.com/blog/static/14636450120112151092934/ 一.printf() printf()函数优点在于可以格式化 ...

  8. 查看JVM内存使用状况

    1.jps:查看本地正在运行的java进程和进程ID(pid) 2.jinfo pid,查看指定pid的所有JVM信息 1)jinfo -flags pid 查询虚拟机运行参数信息. 2)jinfo ...

  9. python 模块 不可不知的知识点

    大纲可参考博客:http://www.cnblogs.com/yuanchenqi/articles/6766020.html 1.正则表达式中(re模块),. 代表除换行符以外的任意符号,但如果加上 ...

  10. python小总结3(异常、单例设计模式)

    一.异常 AttributeError:试图访问一个对象没有的成员[属性和方法] ValueError:值错误,传入了一个不期望的值 ImportError:无法导入模块或者包:基本上路径问题 Ind ...