<!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>