在用數據渲染前端頁面的幾種方式下，原生js和jQuery都需要操作DOM，生成元素，添加元素等一系列操作，而Vue只需要v-for指令就輕鬆解決。
實現功能：有標題和圖片兩部分組成，點擊相應的標題顯示響應的圖片，其他圖片隱藏。
實現效果:
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/Vue.js"></script>
<style>
.tab {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 50px auto;
}
ul {
margin: 0;
padding: 0;
height: 50px;
}
li {
cursor: pointer;
box-sizing: border-box;
height: 50px;
width: 100px;
list-style: none;
text-align: center;
line-height: 50px;
float: left;
border-right:1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.active {
background-color: pink;
}
.img {
display: none;
height: 250px;
width: 400px;
}
.img img {
height: 100%;
width: 100%;
}
.current {
display: block;
}
</style>
</head>
<body>
<div class="tab" id="tab">
<ul>
<li @click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
</ul>
<div :class='currentIndex==index?"current":""' class="img" :key='item.id' v-for='(item,index) in list'>
<img :src="item.path" alt="">
</div>
</div>
<script>
var vm=new Vue({
el:'.tab',
data:{
currentIndex:0,
list:[{
id:1,
title:'武則天',
path:"img/武則天.jpg",
},
{
id:2,
title:'李白',
path:"img/李白.jpg",
},
{
id:3,
title:'伽羅',
path:"img/伽羅.jpg",
},
{
id:4,
title:'大喬',
path:"img/大喬.jpg",
}]
},
methods:{
change:function(index){
this.currentIndex=index;
}
}
});
</script>
</body>
</html>
Vue實現了另一種方式的編程，可以快速的將後端傳的數據渲染到頁面。