Vue 基本语法

数据绑定

<template>
<div>我是数据</div>
<div>我是{{shuju}}</div>
</template>
<script>
export default{
    data(){
    return{
    shuju : "数据"
        }
    }
}
</script>

事件绑定

// 语法糖: v-on = @

<template>
<div @click="fun()"> {{button}} </div>
</template>
<script>
export default{
    data(){
    return{
        button : 点击事件,
        num : 10
        }
    }
}
methods : {
    fun(){
        console.log('方法1');
    }
}
</script>

if 判断

// v-if判断, 值为真就显示, 值为假就不显示
<template>
<div v-if="show"> 点击事件 </div>
</template>
<script>
export default{
    data(){
    return{
        show : false,
        num : 10
        }
    }
}
</script>

循环

// vue的循环是循环的值,放前面

<li v-for="v in name">{{v}}</li>
<script>
export default{
    data(){
    return{
        name : [
            "老一",
            "老二",
            "老三",
            "老四",
            "老五",
            "老六"
        ]
        }
    }
}
</script>