介绍

{{ text }} 不能用在 元素的属性上，需要用 v-bind 指令

用法：

<a v-bind:href="url">超链接</a>

缩写：

<a :href="url">超链接</a>

例子

<style>
    [v-cloak] {
        display: none;
        }
</style>

<div id="app" v-cloak>
    <a v-bind:href="url">{{name}}</a>
    <a :href="url">{{name}}</a>
</div>

<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
  import { createApp } from 'vue'

  createApp({
    data: function(){
        return { //数据
            name: "百度",
            url: "http://www.baidu.com"
        }    
    }
  }).mount('#app')
</script>

拼接字符串

v-bind 指令，可以像插值表达式那样，支持拼接字符串

<div id="app" v-cloak>
    <a v-bind:href="url+'.jpg'">{{name}}</a>
    <a :href="url+'.jpg'">{{name}}</a>
</div>

例子：ajax

准备数据文件

文件名字：array2.json

内容如下：

{
    "books": [
            { "name": "html从入门到放弃","id":"1" },
            { "name": "css从入门到入坟","id":"2" },
            { "name": "葵花宝典","id":"3" }
        ]
}

代码

<ul id="app" v-cloak>
    <li  v-for="item in books" :key="item.id">
        <a :href="'showById?id='+item.id" >{{item.name}}</a>
    </li>
</ul>

<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
  import { createApp } from 'vue'

  createApp({
    data: function(){
        return{
            books: []
        }
    },
    mounted:function(){
        const that = this
        axios.get('js/array2.json').then(function(res){
            console.log(res)
            console.log(res.data.books)
            that.books=res.data.books
        })
    }

  }).mount('#app')

原文出处：/show_1GWF3cKdgT9.html