vue table内修改内容 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="vue-info">
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th>位置</th>
                <th>图片预览(390*234)</th>
                <th>资讯链接</th>
                <th>标题</th>
                <th>修改时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                <!--<in v-for="top in tops"
                :bind:title="top.title"
                :bind:url="top.url"
                :bind:img="top.img"
                :bind:update="top.update"
                ></in>-->
                <tr is='in' v-for="top in tops" 
                :title="top.title"
                :url="top.url"
                :img="top.img"
                :update="top.update"></tr>
            </tbody>
        </table>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
    
    Vue.component('in', {
        template:'\
            <tr>\
                <td>{{id}}</td>\
                <td>\
                    <div v-if="ch">\
                        <img v-bind:src="img" width="100" height="50" />\
                    </div>\
                    <div v-else>\
                        <input type="file" name="img" @change="upload()"/>\
                    </div>\
                </td>\
                <td>\
                    <div v-if="ch">\
                        {{url}}\
                    </div>\
                    <div v-else>\
                        <input type="text" name="url" v-model="url" />\
                    </div>\
                </td>\
                <td>\
                <div v-if="change">\
                        {{title}}\
                    </div>\
                    <div v-else>\
                        <input type="text" name="title" v-model="title" />\
                    </div>\
                </td>\
                <td>{{updated}}</td>\
                <td>\
                    <div v-if="ch">\
                        <button class="btn btn-warning" v-on:click="change()">修改</button>\
                    </div>\
                    <div v-else>\
                        <button class="btn btn-success" v-on:click="sure()">确认</button>\
                        <button class="btn btn-danger" v-on:click="change()">取消</button>\
                    </div>\
                </td>\
            </tr>\
            ',
        props:['url', 'title', 'updated', 'img', 'id'],
        data:function() {
            return {
                ch:true,
                file:0,
            }
        },
        methods: {
            change: function() {
                this.ch = !this.ch;
            },
            upload:function(index) {
                this['file'+index] = event.target.files[0];
            }
        },
    });
    var vm = new Vue({
        el : "#vue-info",
        data: {
            tops: [
                {
                    id:0,
                    img:'',
                    url:'',
                    title:'',
                    status:1,
                    updated:'',
                },
                {
                    id:1,
                    img:'',
                    url:'',
                    title:'',
                    status:1,
                    updated:'',
                }
            ],
        },
        mounted : function() {
        },
        methods: {
        },
    });
        </script>
</body>
</html>

 

posted @ 2017-03-11 15:52  fly不起来啊！  阅读(9556)  评论(0)    收藏  举报