vue.js — v-model、v-for、v-if 、v-show 的基本用法

今天要写的是 vue.js 里面两个很常用的指令：v-model 和 v-for 。

1、v-model

v-model 是 vue.js 里面唯一一个可以实现数据双向绑定的指令。

v-model 只能通过表单元素实现与用户的交互，也就是说， v-model 只能绑定到表单上面，如：input（text , radio , address , email...） select     checkbox   textarea

下面来举个例子：

<div id="app">
    <h4>{{ msg }}</h4>
    <input type="text" style="width:100%;" v-model="msg">
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"大家都是好学生，爱敲代码，爱学习，简直完美，没瑕疵！"    
        },
        methods:{
        
        } 
    })
</script>

2、v-for

v-for 循环普通数组：

<div id="app">
    <p v-for="(item,i) in list">索引值:{{ i }}---列表值:{{ item }}</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            list:[1, 2, 3, 4, 5, 6]
        },
        methods:{}
    })
</script>

v-for 循环对象数组：

<div id="app">
    <P v-for="item in list">id:{{ item.id}}---name:{{ item.name }}</P>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
           list:[
              {id: 1, name: 'zs1'},  
              {id: 2, name: 'zs2'}, 
              {id: 3, name: 'zs3'}, 
              {id: 4, name: 'zs4'}, 
            ] 
        },
        methods:{

        }
    })

</script>

v-for 循环对象：

<div id="app">
    <p v-for="(val, key) in user">key:{{ key }}---val:{{ val }} </>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            user:{
                id:1,
                name:"托尼.世达克",
                gender:"男"
            }
        },
    })
</script>

注意：在遍历对象身上的键值对的时候，除了有 val 和 key ，在第三个位置还有一个索引。

v-for 迭代数字：

<div id="app">
    <p v-for="count in 10">
        这是第 {{ count }} 次循环
    </p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            
        },
        methods:{

        }
    })
</script>

注意：数字迭代是从 1 开始的。

 

v-for 中 key 的使用注意事项：

2.2.0+ 的版本里，当在数组中使用 v-for 时， key 现在是必须的。

<div id="app">
    <p v-for="item in list" :key="item.id">
        <input type="checkbox">
        {{ item.id }}--- {{ item.name }}
    </p>
</div>
<script>
    var vm = new Vue({
        el:"app",
        data:{
            list:[
                {id:1, name:"李斯"},
                {id:2, name:"嬴政"},
                {id:3, name:"赵高"},
                {id:4, name:"韩非"},
                {id:5, name:"荀子"},
            ]
        },
        methods:{

        }
    })
</script>

3、v-if 和 v-show 的用法

v-if 是将元素彻底删除，v-show 是将元素隐藏或显示

<div id="app">
    <input type="button" value="反转" @click="btn">
    <h3 v-if="flag">这是用v-if控制的</h3>
    <h3 v-show="flag">这是用v-show控制的</h3>    
</div>
<script>
    var vm =new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            btn(){
                this.flag=!this.flag
            }
        }    
    })
</script>