v-forを使ってリストの中身とリンク先を個々に出力したい

Vueを勉強し始めたのですが、ちょっと詰まってしまったので、ご回答頂けましたら幸いです。

v-forを使い、以下の様な形で出力するにはどうしたらいいのでしょうか？
※テキストとリンクを別々に管理したい

言葉足らずになってしまいましたが、何卒、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことかな

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5  <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
6  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8<body>
9<div id="app">
10  <ul>
11    <li v-for="item in items">
12      <a v-bind:href="item.url" target="_blank">{{ item.text }}</a>
13    </li>
14  </ul>
15</div>
16<script>
17  var value =   new Vue({
18    el: '#app',
19    data: function() {
20      return({
21        items:[
22          {
23            url: 'http://www.google.com/',
24            text: 'google'
25          },
26          {
27            url: 'http://www.yahoo.co.jp/',
28            text: 'yahoo'
29          }
30        ]
31      });
32    }
33  })
34</script>
35</body>
36</html>