Vue.js常用指令详解：v-if、v-show、v-else、v-for、v-bind与v-on

<div id="example01">
 <p v-if="male">Male</p>
 <p v-if="female">Female</p>
 <p v-if="age>25">Age:{{age}}</p>
 <p v-if="name.indexOf('lin')>0">Name:{{name}}</p>
</div>

var vm= new Vue({
 el:"#example01",
 data:{
 male:true,
 female: false,
 age:29,
 name:'colin'
 }
 })

<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<hr>
<h1 v-show="name.indexOf('cool') = 0">Name: {{ name }}</h1>
<h1 v-else>Sex: {{ sex }}</h1>
</div>

<script>
 var vm = new Vue({
 el: '#app',
 data: {
 age: 21,
 name: 'keepcool',
 sex: 'Male'
 }
 })
</script>

<style>
table,th,tr,td{
 border:1px solid #ffcccc;
 border-collapse: collapse;
 }
</style>

<div id="example03">
 <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>
 var vm = new Vue({
 el: '#example03',
 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>

<ul class="pagination">
 <li v-for="n in pageCount">
  <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
 </li>
 </ul>

<div id="example04">
 <input type="text" v-model="message">
 <button v-on:click="greet">Greet</button>
 <!-- v-on指令可以缩写为@符号-->
 <button @click="greet">Greet Again</button>
 </div>

<script>
 var exampleData04={
 message:"Nice meeting U"
 };
 var vm2=new Vue({
 el:"#example04",
 data:exampleData04,
 methods:{
 greet:function(){
 alert(this.message);
 }
 
 }
 })
</script>