v-show,v-on例子：

<div id="app">
   <button v-show="index>0" @click="index--">-</button>
   {{list[index]}}
   <button v-show="index<list.length-1" @click="index++">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
<script>
    const app = new Vue({
        //element缩写
        el: '#app',
        data: {
            index:0,
            list:[1,2,4,8]
        }
    })
</script>

v-for例子：

<div id="app">
  <ul>
    <li v-for="(item,index) in list" :key="item.id">
        <span>名字：{{item.name}}</span>
        <span>岁数：{{item.age}}</span>
        <button @click="del(item.id)">删除</button>
    </li>
  </ul>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
<script>
    const app = new Vue({
        //element缩写
        el: '#app',
        data: {
            list:[
                {id:1,age:18,name:"小明"},
                {id:2,age:20,name:"小红"},
                {id:3,age:21,name:"小白"}
            ]
        },
        methods:{
            del(id)
            {
                this.list = this.list.filter(item => item.id != id);
            }
        }
    })
</script>

v-model：可以让数据和视图，形成双向数据绑定
1）数据变化，视图自动更新；
2）视图变化，数据自动更新；

<div id="app">
   账号：<input type="text" v-model="username" />
   密码：<input type="password" v-model="password" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
<script>
      const app = new Vue({
          //element缩写
          el: '#app',
          data: {
             username:"ahuinan",
             password:"123456"
          }
      })
</script>