console
var Main = {
data() {
return {
data: [
{user:'A',msg:'1'},
{user:'B',msg:'2'},
{user:'C',msg:'3'},
{user:'D',msg:'4'},
{user:'E',msg:'5'},
{user:'F',msg:'6'},
{user:'F',msg:'7'},
{user:'F',msg:'8'},
],
active: 0,
};
},
watch: {},
computed: {},
mounted() {},
created() {
},
methods: {},
}
var Ctor = Vue.extend(Main);
var app = new Ctor().$mount('#app');
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow"/>
<meta name="googlebot" content="noindex, nofollow"/>
<title>ccccccc - JSRUN 驱动</title>
<script type="text/javascript" src="" ></script>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="app">
<div>
<table class="table" border="0" cellpadding="0" cellspacing="0">
<tr v-for="n in data.length/2">
<td class="t1">{{data[2*n - 2].user}}</td>
<td>{{data[2*n - 2].msg}}</td>
<td class="t1">{{data[2*n - 1].user}}</td>
<td>{{data[2*n - 1].msg}}</td>
</tr>
</table>
</div>
</div>
<script src="//unpkg.com/vue/dist/vue.js">
</script>
<script type="application/javascript" src="main.js"></script>
</body>
</html>
.table {
border-right: 1px solid #EDEDED;
border-bottom: 1px solid #EDEDED;
color: #666;
width: 80%;
margin: 0 auto;
margin-top: 20px;
}
.table td {
border: 1px solid #EDEDED;
padding: 1em 1em 1em;
}
.table tr.alter {
background-color: #EDEDED;
}
.table .t1{
background-color: #f7f7f7;
}