소인 코드를 보여드리겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="./../dist/style.css">
<link rel="stylesheet" href="./../dist/reset.css">
<link rel="stylesheet" href="./../dist/subMnu.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<style>
.wrap{
width: 100%;
height: 100%;
}
.wrap>.container{
width: 1100px;
margin:0 auto;
height:100%;
}
.container>ul{
display: flex;
}
</style>
</head>
<body>
<?php
include ("head.php");
?>
<template>
<div id ="app" class="wrap">
<div class="container">
<ul>
<li v-for="(a,i) in list" :key="i">
<p>{{list[i].content}}</p>
<video src="list[i].src"></video>
<span>{{list[i].desc}}</span>
</li>
</ul>
</div>
</div>
</template>
<?php
include ("tail.php");
?>
<script type="module">
import data from '../dist/video.js';
var app = new Vue({
el: "#app",
data() {
return {
list : data,
};
},
methods: {
},
});
</script>
</body>
</html>
