Vue v-for使用 vue中循环输出数据

v-for的使用:

代码:

doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js v-for的使用 title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js">script>
head>
<body>
<div id="ask">
    <table border="1">
        <tr>
            <th>编号th>
            <th>标题th>
            <th>出品方th>
        tr>
        <tbody>
            <tr v-for="v in list">
                <td>{{v.id}}td>
                <td>{{v.name}}td>
                <td>{{title}}td>
            tr>
        tbody>
    table>
    <hr>
    <table border="1">
        <tr>
            <th>序号th>
            <th>编号th>
            <th>标题th>
            <th>出品方th>
        tr>
        <tbody>
        <tr v-for="(v,k) in list">
            <td>{{k}}td>
            <td>{{v.id}}td>
            <td>{{v.name}}td>
            <td>{{title}}td>
        tr>
        tbody>
    table>
div>
<script>
    var app = new Vue({
        //element
        el:'#ask',
        data:{
            title:'简单记录',
            list:[
                {id:11,name:'vue学习记录'},
                {id:22,name:'vue学习笔记'}
            ]
        }
    });
script>
body>
html>

 

你可能感兴趣的:(Vue v-for使用 vue中循环输出数据)