v-bind -- 标签属性动态绑定 · Vue&&TypeSprict--基础总结

[TOC] >[success] # v-bind 给标签属性绑定使用 ~~~ 1.v-bind 是让标签属性可以动态的使用data参数或者写一些简单的js表达式 2.和v-text，v-html不同它俩是针对标签中的内容，v-bind 是针对标签中的属性，但是这个三个指令和大胡子语法不同，这三个指令都是在标签属性中定义 3.v-bind的缩写是冒号':' ~~~ >[danger] ##### v-bind 案例 ~~~ 1.简单的说也就是当我们想让标签中的属性可以和vue实例中的data形成绑定赋值的时候，就可以使用v-bind 2.或者当我们想让这个标签可以通过一些三元表达式展示一些我们想的到的效果，也可以使用v-bind让标签中的属性形成可以运行表达式的效果 ~~~ ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app" > <a v-bind:href="url" v-bind:title="title">v-bind的缩写是冒号:</a> </div> <script> var vm = new Vue({ el:"#app", data:{ url:"www.baidu.com", title:'百度' } }) </script> </body> </html> ~~~ >[danger] ##### 使用v-bind 绑定一组属性 ~~~ 1.正常使用'v-bind:href="www.baidu.com"'，当'v-bind' 不在为某个指定参数去赋值的时候，可以直接赋值一个包含键值对的对象，但这时候的class 和 style 不能再绑定为数组和对象 2.可以有三种写法: 2.1.案例第一种写法直接在html v-bind后面写上你绑定的对象，但这种写法没有实际意义，因为不是动态去绑定某些值，不如直接采用html写法列如：<a id="vid" href="www.baidu.com">测试</a> 2.2.案例的第二种写法其实和普通使用'v-bind' 类似只不过这个时候不是指定某个参数去赋值，而是直接绑定是对象 2.3.案例三和案例二的区别可以理解成，案例三是只是动态去改变value，案例二是动态绑定一组属性和属性对应的key 3.要注意的是这种用法不能缩写成':=' ~~~ ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> </head> <body> <div id="app">  <a v-bind='{id:"vid",href:"www.baidu.com"}'>测试</a>  <a v-bind="attrObj">测试1</a>  <a v-bind="{id:aId,href:aHref}">测试2</a> </div> <script> var vm = new Vue({ el:'#app', data:{ attrObj:{id:'attrId',href:'www.baidu.com'}, aId:'aId', aHref:'www.baidu.com', } }) </script> </body> </html> ~~~ >[danger] ##### 2.6 + 新增的动态参数绑定 ~~~ 1.用法就像下面案例写的一样，不过里面有个坑，先引用文档中说的一个解释: '在 DOM 中'使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要'避免使用大写字符来命名键名'，因为'浏览器会把 attribute 名全部强制转为小写' 2.解释文档中这句话：下面案例中js里面的'dynamickey' 正确命名规范是小驼峰的方式应该是'dynamicKey',但是如果这么命名，在html 里面去使用的时候':[dynamicKey]' 在编译的时候会编译成成':[dynamickey]',但是你vue参数中的命名是和编译后的命名一个是'dynamicKey'一个是'dynamickey',因此就会报错 3.第二个注意点就是引用文档中说的： '动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的'  <a v-bind:['foo' + bar]="value"> ... </a> ~~~ ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> </head> <body> <div id="app">  <a :[dynamickey]="hrefLink">2.6+增加的动态key</a>  </div> <script> var vm = new Vue({ el:'#app', data:{ hrefLink:'www.baidu.com', dynamickey:'href' // 动态key 可以用动态参数决定 } }) </script> </body> </html> ~~~ >[danger] ##### 驼峰形式的dom属性使用v-bind绑定 -- .camel ~~~ 1.上一个案例已经说了，在编辑过程中会把驼峰形式的属性全部转换成小写，如果此时这个属性就是驼峰形式的写法，想使用'v-bind' 来动态绑定的话需要两个步骤 1.1. 使用'.camel'来修饰 1.2.使用'-'将驼峰分割开来 ~~~ * 案例说明 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> </head> <body> <div id="app">  <svg :view-box.camel="viewBox" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100%" height="100%"/> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> </div> <script> var vm = new Vue({ el:'#app', data:{ viewBox:'0 0 100 100' } }) </script> </body> </html> ~~~