v-bind 指令详解:
1 、这个指令是干嘛的?
可以让html标签的某个属性的值产生动态的效果
2、v-bind指令的语法格式:<HTML 标签 v-bind : 参数 = “表达式”> </HTML>
3、v-bind指令的编译原理:
编译前:<HTML 标签 v-bind : 参数 = “表达式”> </HTML>
编译后:<HTML 标签 参数 = “表达式”> </HTML>(以参数作为HTML的属性名)
注意两项:
1.在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”
2.表达式会关联data,当data发生改变之后
- v-bind 很常用表格,所有vue框架对该指令提供了一种简写方式:
只是针对v-bind 提供了以下简写方式:<img : src = " imgPath"><br>
5.什么时候使用插值语法? 什么时候使用命令
凡事标签体中的内容要想动态,需要使用插值语法。只要想让HTML标签的属性动态,需要使用指令语法
<body>
<div id ='app'>
//注意:1、以下代码中msg是变量名
2、原则上v-bind指令后面的这个参数名可以随便写
3、虽然可以随便写,但大部分情况下,这个参数名还是需要写成改HTML标签支持的属性名,这样才会有意义
<span v-bind : abc =“msg”></span>
<span v-bind : abc =“ 'msg ' ”></span> //这个表达式带有单引号,这个‘msg’就不是变量,是常量
v-bind实战:
<img src=“../img/1.png”><br>
<img v-bind : src = " imgPath"><br>
v-bind简写形式
<img : src = " imgPath"><br>
这是一个普通的文本框
<input type =“text” name=“username” value=“zhangsan”><br>
以下文本框可以让value这个数据变成动态的这个就是典型的动态数据绑定
<input type =“text” name=“username”: value=“zhangsan”><br>
使用v-bind也可以让超链接的地址动态
<a href="https://element-plus.org/zh-CN/component/dialog.html">点击</a><br>
<a :href="url">单机</a> <br>
不能采用以下写法:
<a href = "{{url}}">点击吧</a>// 属性内部插值这种语法已经被移除了,可能vue以前的版本中是支持这种写法的,但是现在不允许了。
请使用v-bind冒号速记来代替。请使用<div id= "val">来代替
</div>
<script>
new Vue ({
let i=100;//赋值的过程就可以看做是一种绑定的过程
el : '#app'
data(){
msg : ' qwert'
imgPath : "abc"
username= : 'https://element-plus.org/zh-CN/component/dialog.html' ,
url : 'https:'
}
})
</scirpt>
</body>