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