vue.js 怎样给<td>标签循环绑定数据

JavaScript020

vue.js 怎样给<td>标签循环绑定数据,第1张

首先这里有文档 

条件与循环

vue中都是用v-for来进行循环的

<template>

  <table border="1">

    <tr>

      <td v-for="item in items">{{item.name}}</td>

     </tr>

    </table>

</template>

<script>

    export default {

        data(){

            return {

                items:[

                {name:"小明"},

                {name:"小张"},

                {name:"小李"},

                ]

            }

       }

     }

</script>

<style>

</style>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>list</title>

</head>

<body>

<ul id="list">

    <li v-for="item in items">

        {{ item.message }}

    </li>

    <br>

    <li v-for="(item,index) in items">

        {{index}}:{{ item.message }}

    </li>

    <br>

    <template v-for="item in items">

        <li>{{ item.message }}</li>

        <li>--------------</li>

    </template>

    <br>

    <li v-for="value in object">

        {{ value }}

    </li>

    <br>

    <li v-for="(value,key) in object">

        {{key}}:{{ value }}

    </li>

    <br>

    <li v-for="n in 10">{{ n }}</li>

    <br>

    <li v-for="n in numbers">{{ n }}</li>

</ul>

<!--of 替代 in-->

<script src="js/vue.js"></script>

<script>

    var vm = new Vue({

        el:"#list",

        data: {

            items: [

                {message: 'Foo' },

                {message: 'Bar' }

            ],

            object: {

                FirstName: 'John',

                LastName: 'Doe',

                Age: 30

            },

            numbers: [ 1, 2, 3, 4, 5 ]

        },

        computed:{

            list:function(){

                this.items.push({ message: 'Baz' })

            },

            evenNumbers: function () {

                return this.numbers.filter(function (number) {

                    return number % 2 === 0

                })

            }

        }

    })

</script>

</body>

</html>

使用组件里的bind这个神器

<template v-for="item in myway.list">

<compa v-if="$index % 2 == 0" :data="item"></compa>

<compb v-else :data="item"></compb>

</template>

整数(Integer):任意自然数(如1,2,3,4,5)以及它们的负数或0。(整数是表示物体个数的数,0表示有0个物体)整数是人类能够掌握的最基本的数学工具。整数的全体构成整数集,整数集合是一个数环。在整数系中,自然数为0和正整数的统称,称0为零,称-1、-2、-3、?、-n、? (n为整数)为负整数。正整数、零与负整数构成整数系。 一个给定的整数n可以是负数,非负数,零(n=0)或正数。