master

分支 (1)

管理

管理

master

vue-website
/
20170728-full.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>组件完整示例</title>
    <link rel="stylesheet" href="./static/css/demo.css" />
    <script src="./static/vue1.js"></script>
</head>

<body>
<div id="app">
    <div id="searchBar">
        Search <input type="text" v-model="searchQuery" />
    </div>
    <simple-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
    </simple-grid>
</div>

<template id="grid-template">
    <table>
        <thead>
        <tr>
            <th v-for="col in columns">
                {{ col | capitalize}}
            </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="entry in data | filterBy filterKey in 'name'">
            <td v-for="col in columns">
                {{entry[col]}}
            </td>
        </tr>
        </tbody>
    </table>
</template>
<script>
    var mv = new Vue({
        el:'#app',
        data:{
            searchQuery:'',
            gridColumns:['name','age','sex'],
            gridData:[
                {
                  name:'spring',
                  age:'32',
                    sex:'female'
                },
                {
                    name:'kagome',
                    age:'18',
                    sex:'female'
                },
                {
                    name:'inuyasha',
                    age:'500',
                    sex:'male'
                },
                {
                    name:'fairy',
                    age:'25',
                    sex:'female'
                },
            ]
        },
        components:{
            'simple-grid':{
                template:'#grid-template',
                props:{
                    data:Array,
                    columns:Array,
                    filterKey:String,
                }
            }
        }
    })
</script>
</body>


</html>