它解决的问题

给HTML标签的属性赋值

用法

v-bind指令的普通用法，给已知属性赋值。属性值通过js动态获取。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>vue3青铜到黄金</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/vue3.1.5_vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>绑定图片：<img v-bind:src="imgUrl"/></h3>
        <h3><a v-bind:href="url">点击对属性进行绑定赋值</a></h3>
        <h3>绑定属性URL：<a v-bind:[attr]="url">点击</a></h3>
        <h3>拼接属性attr+'f':  <a v-bind:[attr+'f']="url">点击</a></h3>
        <h3>省略v-bind : <a :[attr+'f']="url"> 点击</a></h3>
    </div>
</body>
<script>
    const { createApp } = Vue
    //const url = 'https://blog.csdn.net/qq_28008615'
    const url = 'https://juejin.cn/user/3720403077840461'
    const attr = 'hre'
    const imgUrl = 'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
    //const imgUrl = 'https://www.baidu.com/img/flexible/logo/pc/result@3.png'
    //const imgUrl = 'https://www.baidu.com/img/flexible/logo/pc/result@4.png'
    
    const app = {
        setup() {
            return {
                imgUrl,
                url,
                attr
            }
        }
    }   
    createApp(app).mount('#app')
</script>
</html>

效果如下：

在这里插入图片描述

解析

绑定图片：

直接绑定图片展示

这里展示绑定图片的，本来想绑定掘金站结果掘金站图片好像不友好啊，展示不了。算了。。。

点击对属性进行绑定赋值

直接绑定博客链接。可以绑定到自己的博客试试看，挺方便的。

其他绑定展示

可以拼接标签属性，而且还能省缺不写v-bind，总体看起来很适合入手。最后，介绍一下v-bind指令的简写形式：，没错！就是冒号：

今天就分享到这里，三连支持丸子吧。

丸子这个专栏也不错# ES6技术原理分享

每天吸取一个小小知识点，慢慢成为大神，感谢。

vue3前端青铜到黄金王者 - 第二个入门v-bind

它解决的问题

用法

解析

绑定图片：

点击对属性进行绑定赋值

其他绑定展示