コード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- vueのスクリプトを読み込むCDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.11/dist/vue.js"></script>
<title>VueTest1</title>
</head>
<body>
<h1>Vueテスト１</h1>
<div id="app">
<p v-for="(item, index) in items">{{item.name}} : 買いたいペットは、{{item.pet}}</p>
</div>
<!-- 以下は適宜変更してください -->
<script src="./js/vue1.js"></script>
</body>
</html>
Javascript
const items = [
{
name: '健一',
pet:'キリン'
},
{
name:'真香',
pet:'猫',
},
{
name:'幸一',
pet:'幸せ'
}
];
const vm = new Vue({
el: '#app', //表示させる範囲を指定
data:{
items: items //データ変数を格納
}
});
結果
