一、v-bind基本使用
一个页面中，除了标签内容需要动态绑定外，标签的属性也需要动态绑定，例如：a元素的href属性和img元素的src属性。这时就需要用到v-bind了。
<body>
<div id="app" >
<!-- 动态绑定图片路径 在元素属性前面加b-bind指令即可-->
<img v-bind:src="imgUrl">
<!-- 动态绑定链接 在元素属性前面加b-bind指令即可-->
<a v-bind:href="aHref">百度一下</a>
<!--v-bind 语法糖写法，语法糖又名 简写-->
<img :src="imgUrl">
<a :href="aHref">百度一下</a>
</div>
<script src="./js/vue.js"></script>
<script>
//vue解析时去掉v-cloak属性，标签显示
const app = new Vue({
el: "#app", //用户挂载要管理的元素
data:{
//定义数据
imgUrl: 'https://img11.360buyimg.com/mobilecms/s300x300_jfs/t1/95049/33/2570/130678/5dd2a567E8f4d6e13/1d597ef0cf85be04.jpg!q70.jpg.webp',
aHref: 'http://www.baidu.com'
}
})
</script>
</body>
效果图：
二、v-bind动态绑定class属性
- 普通语法(了解)
<head>
<style>
.colourStyle {
color: red;
}
</style>
</head>
<body>
<div id="app" >
&l
最低0.47元/天 解锁文章
7462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
