zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    当Django模型迁移时,报No migrations to apply 问题时
    django--各个文件的含义
    django--创建项目
    1013. Battle Over Cities (25)
    1011. World Cup Betting (20)
    1009. Product of Polynomials (25)
    1007. Maximum Subsequence Sum (25)
    1006. Sign In and Sign Out (25)
    1008. Elevator (20)
    1004. Counting Leaves (30)
  • 原文地址:https://www.cnblogs.com/a-flydog/p/6535139.html
Copyright © 2011-2022 走看看