绑定元素特性的指令v-bind

回顾下,从HTML元素的结构看,在VUE框架中,内容由插值{{ }}v-html绑定;v-ifv-show可以控制元素的可见性;v-for可以用于批量生成列表元素。

这一节介绍下绑定元素特性的指令v-bind的用法:

v-bind:attribute = value
v-bind:attribute = expression // v-bind 简写 :
:attribute = value
:attribute = expression

点击查看DEMO v-bind on attribute

<div id="app">
<button v-bind:disabled = "disabledForBtn">click me</button>
</div>
new Vue({
el: "#app",
data: {
disabledForBtn: true
}
})

这个例子当disabledForBtn为真值时,按钮被禁用,即disabled特性生效。其中disabled称为指令v-bind的参数,而=后面的值其它指令一样,可以是具体的布尔值类型值,也可以表达式试算的结果值。

<div id="app">
<input v-bind:disabled = "new Date().getHours() > 12" />
</div>

但通常不建议将复杂计算写在tempalte模板中,可以使用后面要讲到的计算属性来表达,使代码更为简洁。

<div id="app">
<input v-bind:disabled = "isCanUseInput" />
</div>
new Vue({
el: "#app",
data: {
canUseBtn: true
},
computed: {
isCanUseInput: () => new Date().getHours() > 12
}
})

当在页面中有大写特性绑定,需要反复书写v-bind相当重复工作,所以Vue提供了简写方式:用冒号:代替v-bind

<button :disabled = "disabledForBtn">click me</button>
<input :disabled = "new Date().getHours() > 12" />
<input :disabled = "isCanUseInput" />

无论选择用v-bind还是简写冒号的形式,建议在页面中都尽量保持一致性。

HTML元素中有两个特殊的特性,classstyel,下一节具体讲解。

vue-learning:6-template-v-bind的更多相关文章

  1. vue报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    在.vue文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one roo ...

  2. 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

  3. Vue系列:如何将百度地图包装成Vue的组件

    主要分解为如下步骤: (1)在html文件中引入百度地图, <script type="text/javascript" src="http://api.map.b ...

  4. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  5. Deep learning:四十六(DropConnect简单理解)

    和maxout(maxout简单理解)一样,DropConnect也是在ICML2013上发表的,同样也是为了提高Deep Network的泛化能力的,两者都号称是对Dropout(Dropout简单 ...

  6. Vue.js:轻量高效的前端组件化方案(转载)

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  7. 转载 Deep learning:六(regularized logistic回归练习)

    前言: 在上一讲Deep learning:五(regularized线性回归练习)中已经介绍了regularization项在线性回归问题中的应用,这节主要是练习regularization项在lo ...

  8. 组件嵌套时报:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    在组件嵌套的过程中,报了一个错误: 这里报错的原因是:vue的组件(模板)只能有一个根节点,即.vue文件中的<template>标签下只能有一个子元素. 因此,建议大家在写.vue组件的 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战:个人博客第一版(axios+router)

    前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...

  10. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

随机推荐

  1. 阿里云区块链共创会:BaaS正式商业化 广邀合作伙伴共建生态

    摘要: 阿里云宣布区块链服务Hyperledger Fabric版正式商业化,并发布生态合作伙伴计划. 2019年3月29日,阿里云区块链于深圳召开正式商业化共创会,宣布区块链服务Hyperledge ...

  2. Servlet FilterConfig

    FilterConfig的对象由Web容器创建.这个对象可用于获取web.xml文件中Filter的配置信息 文件:index.html <!DOCTYPE html> <html& ...

  3. LeetCode91 Decode Ways

    题目: A message containing letters from A-Z is being encoded to numbers using the following mapping: ' ...

  4. 在WPF中绘制多维数据集

    原文 https://stuff.seans.com/2008/08/13/drawing-a-cube-in-wpf/ 是时候使用WPF绘制一个简单的3D对象了.作为WPF中3D图形的快速介绍,让我 ...

  5. Git 的两种忽略文件方式 gitignore 和 exclude

    Git 的两种忽略文件方式 gitignore 和 exclude .gitignore 不用说了,大家都知道. 有一个 exclude 可能接触比较少. 知道这个功能后发现,用在服务器上非常方便,因 ...

  6. 安装pip3遇到:E: Unmet dependencies. Try 'apt-get -f install' with no packages (or specify a solution).

    安装pip3遇到:E: Unmet dependencies. Try 'apt-get -f install' with no packages (or specify a solution). 具 ...

  7. java基础-内存分配

    1.java运行时的数据区:程序计数器.方法区.虚拟机栈.本地方法栈.堆 ①.程序计数器:一块较小的内存空间,可看作当前线程所执行的字节码的行号指示器 ②.java虚拟机栈:与程序计数器一样,也是线程 ...

  8. 像Google一样构建机器学习系统3 - 利用MPIJob运行ResNet101

    本系列将利用阿里云容器服务,帮助您上手Kubeflow Pipelines. 第一篇:在阿里云上搭建Kubeflow Pipelines 第二篇:开发你的机器学习工作流 第三篇:利用MPIJob运行R ...

  9. Android 字体库的使用

    开发Android的人大多都知道,Android里面对字体的支持少得可怜,默认情况下,TextView  的 typeface 属性支持 "Sans","serif&qu ...

  10. python -- 类中--内置方法

    isinstance 和  issubclass isinstance(obj,b)  检查是否obj是否是类b的对象 class A(object):pass class B(A):pass b=B ...