VUE中的常见事件、用法、组件

v-for渲染列表

//user为我们script里面设置的数据  i为索引下标
<div class="app">
<div v-for="(user,i) in users">
    <span>编号：{
  {i+1}}</span>
    <span>人名：{
  {user.name}}</span>
    <span>年龄：{
  {user.age}}</span>
</div>
</div>
<script >
    var app = new Vue({
    
        el:".app",
        data:{
    
            users:[
                {
    id:31,name:'11',age:18},
                {
    id:52,name:'22',age:20},
                {
    id:13,name:'33',age:19}
            ]
        },

    })
</script>

v-if 和 v-else 的用法

//当isLogin的值为true 则显示内容  为false则显示v-else的内容
<div v-if="isLogin">
        <span>张三</span>|<span>注销</span>
    </div>
    <div v-else>
        <span>登录</span><span>注册</span>
    </div>
<script >
    var app = new Vue({
    
        el:".app",
        data:{
    
             isLogin：true，
            users:[
                {
    id:31,name:'11',age:18},
                {
    id:52,name:'22',age:20},
                {
    id:13,name:'33',age:19}
            ]
        },

    })
</script>

用v-for遍历一个对象

//这样会把uesr里面所有的单条数据都显示出来
//:key=“user.id” 的作用是绑定跟踪一个不重复的值

<div v-for="(user,i) in users" :key="user.id">
        <span v-for="v in user">