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

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

Vue中的v-if

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

 <div id="vue-app">
     <button v-on:click="error=!error">Toggle Errorbutton>
     <button v-on:click="success=!success">Toggle Succsessbutton>

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

     
 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>
            
            <li v-for="(y,index) in users">{{index}}-----{{y.name}}-----{{y.age}}li>
        ul>

        <div v-for="(y,index) in users">
            
            <h3>{{index}}---{{y.name}}-----{{y.age}}h3>
        div>

        <template v-for="(y,index) in users">
            
            <h3>{{index}}---{{y.name}}-----{{y.age}}h3>
        template>

        <template v-for="(y,index) in users">
            
            <div v-for="(value,key) in y">
                
                <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代码中是一些语法，用于笔记