Vue.js 了解 v-bind 指令
2019-08-01 本文已影响0人
Rinaloving
v-bind 主要是动态更新HTML元素上的属性，回顾一下下面的示例：
链接的href属性和图片的src属性都被动态设置了，当数据变化时，就会重新渲染。在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式styled的动态绑定，他们也是HTML的属性，因此可使用v-bind指令。我们只需要用v-bind计算出表达式最终的字符串就可以，不过有时候表达式的逻辑较复杂，使用字符串拼接方法较难阅读和维护，所以Vue.js增强了对class和style的绑定。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>了解 v-bind 指令</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">链接</a>
<img style="height: 400px;width: 300px;" v-bind:src="imgUrl">
<br>
<br>
<!--缩写为-->
<a :href="url">链接</a>
<img style="height: 400px;width: 300px;" :src="imgUrl">
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
url:'https://www.baidu.com',
imgUrl:'http://b127.photo.store.qq.com/psb?/440982b8-1f1e-473c-b41d-b630005d5f65/k47uYaiYTmzFY29wd.*P67qQrqqT3MhfQ7PypQE3b4g!/b/dDb0wUsuBAAA&bo=gALEA1IDAAUBKB4!&rf=viewer_4'
}
})
</script>
</body>
</html>
了解v-bind指令.png
