vue裡a標籤從後臺獲取連結並實現跳轉

vue裡a標籤從後臺獲取連結並實現跳轉

當我從data裡寫一個json時，頁面渲染迴圈出json檔案，連結可以實現跳轉。
程式碼：

<style>
        #app{
            min-width: 1200px;
            margin: 0px 60px;
        }
        #app ul li{
            display: inline-block;            
            border: 1px solid gray;
            list-style: none;
        }
       
        #app ul li img{
            width: 200px;
            height: 300px;
        }
    </style>

v-for：基於源資料多次渲染元素或模板塊。此指令之值，必須使用特定語法 alias in expression，為當前遍歷的元素提供別名：比如我自定義的movie，以及從data獲取的名字為subjects的資料。

 <div id="app">
        <ul>
            <li v-for="movie in subjects" :key="movie.id">
               評分： {{movie.rate}}<br/>              
               電影名： {{movie.title}}<br/>
               <!-- v-bind繫結href，從迴圈中獲取url連結並實現跳轉 -->
               連結：<a :href="movie.url">{{movie.url}}</a> <br/>
             圖片： <img :src="movie.cover" alt=""><br/>
               ID： {{movie.id}}<br/>
            </li>
        </ul>
    </div>

<script src="./vue.js"></script>//引入vue
<script>
        new Vue({
            el:"#app",
            data:{
         //這是我從豆瓣裡下載的json檔案，連結也是豆瓣的電影連結       
    "subjects": [
        {
            "rate": "5.7",
            "cover_x": 527,
            "title": "殺戮天眼",
            "url": "https://movie.douban.com/subject/30304769/",
            "playable": false,
            "cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2561506095.webp",
            "id": "30304769",
            "cover_y": 800,
            "is_new": true
        }
  ]
}
            
        })
    </script>