v-bind指令用于给html标签设置属性。

基本用法

<div id="app">
<div v-bind:id="id1">文字</div>
</div> <script>
new Vue({
el: '#app',
data: {
id1: 'myid'
}
})
</script>

这样得到<div id="myid">文字</div>

class 属性绑定

同时传入一个或多个类:

<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div> <script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>

<div v-bind:class="{active: isActive}">文字</div>这种写法的意思是,如果isActive为true,则有active类,如果为false,则没有active类。

<div id="app">
<div v-bind:class="{active: isActive}">文字</div>
</div> <script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>

如果同时多个类都要判断,则可写成<div v-bind:class="{active: isActive, highlight: isHighlight}">文字</div>

还可以直接绑定数据里的一个对象:<div v-bind:class="classObject"></div>,其中classObject是data对象的一个子对象,名称可任意。

而且还可以绑定computed里的属性,毕竟data的数据是静态的,computed的属性可以计算:

<div id="app">
<div v-bind:class="classObject">文字</div>
</div> <script>
new Vue({
el: '#app',
computed: {
classObject: function () {
// 计算过程省略,假设得出了isActive和isDanger的布尔值
return {
'active': isActive,
'text-danger': isDanger
}
}
}
})
</script>

style 属性绑定

跟class属性绑定是一样的道理。

<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div> <script>
new Vue({
el: '#app',
data: {
activeColor: 'green',
fontSize: 30
}
})
</script>

配合v-model实现数据绑定

数据绑定的含义这里先不细说,就先理解为:各种代码之间有数据关联,牵一发而动全身就行了。

<style>
.class1{
background: #444;
color: #eee;
}
</style>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="cssa" id="r1">
<br><br>
<div v-bind:class="{'class1': cssa}">
文字
</div>
</div> <script>
new Vue({
el: '#app',
data:{
cssa: false
}
});
</script>

解释:

v-model="cssa"指令有2个作用,一个作用是设定<input>的初始值,也就是到底打不打勾,另一个作用是切换cssa的状态,也就是说当<input>值为false时,cssa的值也是false,当<input>值为true时,cssa的值也是true。

然后,v-bind:class="{'class1': cssa}"意味着,立即生成一个类似于<div class="">文字</div>或者<div class="class1">文字</div>的标签,具体生成哪个,由cssa的值决定。

最后,

  data:{
cssa: false
}

定义了cssa的初始值,就是false。它影响两者,一个是影响<input>,另一个是影响<div>。假设cssa的初始值设成true,那么,<input>会默认打钩,<div>的class也会有值class1。

注意:v-bind:冒号后面是一个赋值表达式,不要理解为html代码,也就是说v-bind:class="{'class1': cssa}"表示这个div的属性为class,值由cssa决定,尤其是“class”字符,虽然通常情况下它就是属性名,但是不要直接理解为vue在拼接html代码。

属性值拼接

<div id="app">
<div v-bind:id="'list-' + id">文字</div>
</div> <script>
new Vue({
el: '#app',
data: {
id : 1
}
})
</script>

得到<div id="list-1">文字</div>

v-bind:id="'list-' + id"可以看到,id="'list-' + id"确实是表达式,只有'list-'是真正的字符串。

配合过滤器实现数据加工

过滤器,其实就是作用在传递的数据上的函数。

<div id="app">
<a v-bind:href='url | add_protocol'>文字</a>
</div> <script>
new Vue({
el: '#app',
data: {
url: 'microkof.com'
},
filters: {
add_protocol: function (value) {
if (!value) {
return '';
} else {
return 'https://' + value;
}
}
}
})
</script>

比如说,我想给<a>附上href属性,不过恰好有一个问题是href的值没有协议(https://),所以我想给它加上协议,那么就定义一个过滤器(filters),过滤器的名字叫add_protocol,值是一个函数。

v-bind 缩写

v-bind由于太常用,可以缩写。缩写方式是:直接不写,从冒号开始写。

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
 
 
链接:https://www.jianshu.com/p/019b868c0279

vue---- v-bind指令的更多相关文章

  1. v:bind指令对于传boolean值的注意之处

    1,

  2. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  3. Vue 3自定义指令开发

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...

  4. Vue.js常用指令总结

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind ...

  5. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  6. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

  7. Vue(九) 自定义指令

    前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...

  8. Vue.directive自定义指令

    Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...

  9. vue怎么自定义指令??

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

  10. 新人成长之入门Vue.js常用指令介绍(一)

    写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...

随机推荐

  1. Python输入数组(一维数组、二维数组)

    一维数组: arr = input("") //输入一个一维数组,每个数之间使空格隔开 num = [int(n) for n in arr.split()] //将输入每个数以空 ...

  2. jqgrid自定义列表开发=》实现高级查询

    标题已指出本文要说的三件事,首先是主角jqgrid,将应用在自定义列表中,重点介绍如何实现高级查询. 使用jqgrid实现自定义列表分为两大步骤,首先是要根据业务完成jqgrid的对象定义,即列表的描 ...

  3. ALV屏幕捕捉回车及下拉框事件&ALV弹出框回车及下拉框事件

    示例展示: 屏幕依据输入的物料编码或下拉框物料编码拍回车自动带出物料描述: 点击弹出框,输入物料编码拍回车带出物料描述,点击确认,更新ALV: 1.创建屏幕9000,用于处理ALV弹出框: 2.针对屏 ...

  4. Airbnb Javascript 代码规范重要点总结es6

    中文原地址 1.对所有的引用使用 const 而非 var.这能确保你无法对引用重复赋值. 当需要变动引用时,使用let. const和let都是块级作用域. 2.创建对象的方式: const ite ...

  5. 在Python工作环境中安装包命令后加上国内源速度*15

    example: pip install -r requests.txt -r https://pypi.tuna.tsinghua.edu.cn/simple/ --trusted-host pyp ...

  6. tensorFlow可以运行的代码

    折腾了很久,终于运行成功. 才云科技的书不错,就是需要微调一二. 心得:1,记得activate tensorflow,然后再python 2,Python的代码格式很重要,不要错误. 3,还不清楚如 ...

  7. 目标检测(二) SPPNet

    引言 先简单回顾一下R-CNN的问题,每张图片,通过 Selective Search 选择2000个建议框,通过变形,利用CNN提取特征,这是非常耗时的,而且,形变必然导致信息失真,最终影响模型的性 ...

  8. maven管理jar,pom.xml导入spring依赖

    <properties> <junit.version>4.12</junit.version> <spring.version>4.3.9.RELEA ...

  9. 关于Unity3D使用时Scene视图清楚,Game视图不清楚的问题

    1.自己不知道什么时候,将LowResolutioinAspectRatios给勾上了, 2.同样的Scale值大于1的时候也会造成模糊,但这个好像比1好发现一点

  10. JS中的加减乘除和比较赋值

    隐式类型转换 使用Boolean(), Number(), String()去转换数据类型的方法叫显示类型转换,而与它相对的就是隐式类型转换,隐式类型转换并没有明显的标志,而是JS解释器觉得做这样一个 ...