在线代码编辑器-开发工具-核心编程

<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vue</title>
   <script src="https://www.hxstrive.com/cdn/libs/vue/2.7.16/vue.min.js"></script>
</head>
<body>

<div id="app">
       <article-item v-for="article in articles"
           v-bind:key="article.id"
           v-bind:article="article"></article-item>
   </div>

<script type="text/javascript">
       // 定义文章相组件
       Vue.component('article-item', {
           // 自定义 prop
           props: [ "article" ],
           template: `
               <div style="background:#F0F0F0;margin-bottom:10px;padding:10px;">
                   <div>{{article.title}}</div>
                   <div style="font-size:14px;color:#555;">
                       <label>发布日期：{{article.date}}</label>
                       <label>浏览量：{{article.count}}</label>
                   </div>
               </div>
           `
       });

var app = new Vue({
           el: "#app",
           data: {
               articles: [
                   { id:1, title:"Vue 入门", date:"昨日", count:189 },
                   { id:2, title:"Vue 生命周期", date:"上周", count:320 },
                   { id:3, title:"Vue 内部实现原理", date:"2023年6月9日", count:102 }
               ]
           }
       });
   </script>

</body>
</html>

在线代码编辑器 HTML / CSS / JavaScript 实时预览

自动执行

代码编辑区

字符数: 0 提示: 输入完整的 HTML 代码，需包含 DOCTYPE 声明与 html 根标签

预览效果