第四天(Vue中的条件与循环语句——”v-if”,”v-for”)

Vue中的v-if

最近写这个东西感觉有点无聊，我不知道以什么形式来写这个博客，怎么才能使大家能清楚这个知识点，我个人喜欢的就是以例题出发，然后再熟悉其用法，所以还是从代码出发

 <div id="vue-app">
     <button v-on:click="error=!error">Toggle Error</button>
     <button v-on:click="success=!success">Toggle Succsess</button>

     <p v-if="error">网络连接错误404</p>
     <p v-else-if="success">网络连接成功200</p>

     <!-- <p v-show="error">网络连接错误404</p>
     <p v-show="success">网络连接成功200</p> -->
 </div>
 <script src="app.js"></script>

new Vue({
    el:"#vue-app",
    data:{
        error:false,
        success:false
    },
    methods:{
    }
})

这里我认为能熟悉这个用法就好，还有在这里有一个v-if和v-show的用法的区别；如果使用v-if，当error或者success为false的时候，p标签是以注释的形式存在于html中的，而如果使用的是v-show，当error或者success为false的时候，p标签会存在一个display:none的样式；

Vue中的v-for

示例：

<div id="vue-app">
        <!-- 数组下标获取 -->
        {{characters[0]}}
        <br>

        <!-- 数组遍历 -->
        <ul>
            <li v-for="x in characters">{{x}}</li>
        </ul>

        <ul>
            <li v-for="y in users">{{y}}</li>
        </ul>

        <ul>
            <!-- 遍历对象中的属性 -->
            <li v-for="y in users">{{y.name}}-----{{y.age}}</li>
        </ul>

        <ul>
            <!-- 获取对象数组中的index下标值 -->
            <li v-for="(y,index) in users">{{index}}-----{{y.name}}-----{{y.age}}</li>
        </ul>

        <div v-for="(y,index) in users">
            <!-- 使用div类似的标签的时候，在html代码中会出现n个div标签 -->
            <h3>{{index}}---{{y.name}}-----{{y.age}}</h3>
        </div>

        <template v-for="(y,index) in users">
            <!-- 在上面div中，会使页面的结构过于复杂；我们可以使用template这个容器来解决这个问题 -->
            <h3>{{index}}---{{y.name}}-----{{y.age}}</h3>
        </template>

        <template v-for="(y,index) in users">
            <!-- 下面是遍历对象的键值对 -->
            <div v-for="(value,key) in y">
                <!-- y为users中的单个对象 -->
                <p>{{key}}-----{{value}}</p>
            </div>
        </template>

</div>
<script src="app.js"></script>

new Vue({
    el:"#vue-app",
    data:{
        characters:["A","B","C"],
        users:[
            {name:"D",age:30},
            {name:"E",age:20},
            {name:"F",age:10},
        ]
    },
    methods:{
    }
})

在html代码中是一些语法，用于笔记