Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<title></title>
<style>
* {
margin:0;
padding:0;
Box-sizing:border-box
}
HTML {
font-size:12px;
Font-family:ubuntu, Simhei, Sans-serif;
font-weight:400
}
Body {
Font-size:1rem
}
Table
Td
th {
Border-collapse:collapse;
border-spacing:0
}
Table {
width:100%
}
Td
th {
border:1px solid #bcbcbc;
padding:5px 10px
}
th {
Background: #42b983;
Font-size:1.2rem;
font-weight:400;
Color: #fff;
Cursor:pointer
}
Tr:nth-of-type (Odd) {
Background: #fff
}
Tr:nth-of-type (even) {
Background: #eee
}
fieldset {
border:1px solid #BCBCBC;
padding:15px;
}
#app {
margin:0 Auto;
max-width:640px
}
</style>
<body>
<div id= "App" >
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<TR v-for= "person in people" >
<td>{{Person.name}}</td>
<td>{{Person.age}}</td>
<td>{{Person.sex}}</td>
</tr>
</tbody>
</table>
</div>
<script src= "Http://static.runoob.com/assets/vue/1.0.11/vue.min.js" ></script>
<script>
var vm = new Vue ({
El: "#app",
data:{
People: [{
Name: ' Jack ',
Age:30,
Sex: ' Male '
}, {
Name: ' Bill ',
Age:26,
Sex: ' Male '
}, {
Name: ' Tracy ',
Age:22,
Sex: ' Female '
}, {
Name: ' Chris ',
AGE:36,
Sex: ' Male '
}]
}
});
</script>
</body>
This article is from the "Yan" blog, please be sure to keep this source http://suyanzhu.blog.51cto.com/8050189/1895501
VUEJS7-V-FOR Directive 2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
