dasdclass与style绑定v-bind

1. 绑定HTML Class
对象语法

有些时候我们想动态的切换class的类名。在原生的js或jq中我们就要通过事件来动态的改变class类名,但在vue中我们可以通过v-bind:class 来实现这一功能。

<div v-bind:class="{ active: isActive }"></div>
data:{
isActive:false,
}
这其中class类名是否存在active取绝于data 中isActive的值为。
isActive为false 的时候就不存在。为true时就存在
想动态的切换多个class类名时

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: { isActive: true, hasError: false}
如上执行下来class的类名就为“static,active”。
当data中isActive,hasError值进行变化时class类名也会进行相应的变化。
也可以把多个对象直接定义在一个对象里。

<div v-bind:class="classObject"></div>
data: { classObject: { active: true, 'text-danger': false }}
结果和上面的列子一样。

data: { isActive: true, error: null},computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } }}
也可以将这个写在计算属性里面。

当我们新建一个组建也可以在组建上用该方法绑定class类名

Vue.component('my-component', { template: '<p class="foo bar">Hi</p>'})

<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive 为 truthy[1] 时,HTML 将被渲染成为:
<p class="foo bar active">Hi</p>
truthy:在{{Glossary("JavaScript")}}中,Truthy(真值)指的是在{{Glossary("Boolean")}}上下文中转换后的值为真的值。所有值都是真值,除非它们被定义为 {{Glossary("Falsy", "falsy")}} (即, 除了false,0,“”,null,undefined和NaN 外)。

2绑定内联样式
直接看官网例子
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: { activeColor: 'red', fontSize: 30}
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名:

也可以直接绑定到一个对象上
<div v-bind:style="styleObject"></div>
data: { styleObject: { color: 'red', fontSize: '13px' }}
从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex。

vue 复习(2)v-bind的应用 v-bind:classv-binf:style的更多相关文章

  1. vue复习

    vue 复习   options的根属性 el:目的地(srting || DOM元素) template 模板 data 是一个函数 , return一个对象   对象中的key, 可以直接在页面中 ...

  2. C++:vector中的v.at(0)和v[0]的区别

    设v是一个vector的对象, 如果v是非空的,则v.at(0)和v[0]是没有区别的,都是取数组中第一个值: 如果v是空的,则v.at(0)会抛出异常(exception std::out_of_r ...

  3. 证明 U and V={0}时 dim(U+V)=dim(U)+dim(V)

    U And V={0} 证明 dim(U+V)=dim(U)+dim(V)设{u1,u2,...,uk} 是U的基,{v1,v2...,vr}是V的基,dim(U)=k ,dim(V)=r dim(U ...

  4. CF F - Tree with Maximum Cost (树形DP)给出你一颗带点权的树,dist(i, j)的值为节点i到j的距离乘上节点j的权值,让你任意找一个节点v,使得dist(v, i) (1 < i < n)的和最大。输出最大的值。

    题目意思: 给出你一颗带点权的树,dist(i, j)的值为节点i到j的距离乘上节点j的权值,让你任意找一个节点v,使得dist(v, i) (1 < i < n)的和最大.输出最大的值. ...

  5. python代码{v: k for k, v in myArray.items()}是什么意思?

    最近在扒vnpy的源码总能看到{v: k for k, v in ORDERTYPE_VT2HUOBI.items()}这样的源码,就是不知道什么意思 然后万能的google找到了Quora的一个类似 ...

  6. Mybatis-Plus的Service方法使用 之 泛型方法default <V> List<V> listObjs(Function<? super Object, V> mapper)

    首先 我们先看到的这个方法入参是:Function<? super Object , V> mapper ,这是jdk1.8为了统一简化书写格式引进的函数式接口 . 简单 解释一下我对Fu ...

  7. Function.apply.bind()与Function.apply.bind()

    1.Function.apply.bind(…) 我在学习promise部分的时候遇到了这样的代码: Promise.resolve([10,20]).then(Function.apply.bind ...

  8. vue中使用elementUI中表格的v宽度,字体大小

    <el-table :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" style=&q ...

  9. vue复习(一)

    一.认识Vue 定义:一个构建数据驱动的Web界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方面构建单页面应用程序(SPA) 二.引入Vue <!DOC ...

  10. n维向量空间W中有子空间U,V,如果dim(U)=r dim(V)=n-r U交V !={0},那么U,V的任意2组基向量的组合必定线性相关

    如题取U交V中的向量p (p!=0), 那么p可以由 U中的某一组基线性组合成(系数不全是零),同时,-p也可以由V中的某一组基线性组合成(系数不全为零) 考察p+(-p)=0 可知道,U中的这组基跟 ...

随机推荐

  1. Unable to update index for central http://repo1.maven.org/maven2/ 解决方法

    不知道什么原因 MyEclipse(eclipse) 中的 maven 插件突然不能用了,修改 pom.xml 无任何反应 控制台报 Unable to update index for centra ...

  2. 【MFC】CHtmlView或WebBrowser禁止脚本错误提示

    错误展示: 解决办法: 1.CHtmlView类或子类 CHtmlView::SetSilent(TRUE); 2.IWebBrowser2控件 IWebBrowser2::put_Silent(TR ...

  3. numpy数组的创建

    创建数组 创建ndarray 创建数组最简单的方法就是使用array函数.它接收一切序列型的对象(包括其他数组),然后产生一个新的含有传入数据的Numpy数组. array函数创建数组 import ...

  4. The parameter to the method is the basic data type

    package method.invocation; public class TheParameterToTheMethodIsTheBasicDataType { public static vo ...

  5. MUI框架-04-切换页面头部文字重叠

    MUI框架-04-切换页面头部文字重叠 从现在开始就只分享 MUI 框架开发时遇到的问题了 开发不懂请查看:官方文档 问题情况 切换页面 title 文字重叠,覆盖 截图: 解决办法 给 h1 标签加 ...

  6. Ajax的初体验

    一.AJAX的介绍 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. Ajax =  ...

  7. Android获取蓝牙地址

    最近做一个项目,发现Android6.0以上的版本获取的蓝牙地址始终为02:00:00:00, Google一下发现Android早就封掉了相关接口,于是想到反射的方式去获取Mac地址,在此记录一下 ...

  8. 同步(Synchronous)和异步(Asynchronous)的概念

    web项目中的同步与异步 在我们平时的web项目开发中会经常听到ajax请求这样一个称呼,在web项目中可以通过js或者jquery发送同步请求又或者异步请求,同步请求呢往往代表着你必须等待这次请求结 ...

  9. Python 爬虫 ajax爬取马云爸爸微博内容

    ajax爬取情况 有时候我们在用 Requests 抓取页面的时候,得到的结果可能和在浏览器中看到的是不一样的,在浏览器中可以看到正常显示的页面数据,但是使用 Requests 得到的结果并没有,这其 ...

  10. 排序算法(1) 快速排序 C++实现

    快速排序基本特性 时间复杂度:O(n*lgn) 最坏:O(n^2) 空间复杂度:最好情况下:O(lgn),最坏情况:O(n),平均情况:O(lgn) 不稳定. 关于快速排序的空间复杂度,谢谢@命运他爹 ...