[Vue基础实战]v-if/show v-for v-for:key的使用

参考代码1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if/show的使用</title>
</head>
<body>    
    <div id="app">
     <div v-if="flag">从一而终</div>
     <div v-show="flag">反复无常</div>
     <input type="button" value="隐藏/显示" @click="flag=!flag">       
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                flag:true            
            }           
        });
    </script>
</body>

</html>

参考代码2:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>v-for的使用</title>      
    </head>
    <body>
        <div id="app">
          <p v-for="(a,b) in list">
              {{a}}-{{b}}
          </p>
          <p v-for="item in users">
            {{item.e}}-{{item.f}}
          </p>
          <p v-for="j in 10">
            {{j}}
          </p>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                  list: ['a','b','c','d'],
                  userInfo:{
                      username:'zs',
                      age:100
                  },
                  users:[{e:'11',f:'ffff'},{e:'22'},{g:'33',f:'ffffff'}]
                },
                methods: {
                    autoAdd() {
                        this.number++;                       
                    },
                    autoSubtract(){
                        this.number--;
                    }
                },
            });
        </script>
    </body>
    </html>

参考代码3:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for的使用</title>
</head>

<body>
    <h2>华山论剑</h2>
    <div id="app">
        <label for="">ID:<input type="text" v-model="id"></label>
        <label for="">绰号:<input type="text" v-model="name"></label>
        <input type="button" value="晋级" @click="add">
        <table>
            <tr v-for="item in list">
                <td><input type="checkbox"></td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                id: 0,
                name: '',
                list: [
                    { id: 1, name: 'dddd' },
                    { id: 2, name: 'eeee' },
                    { id: 3, name: 'ffff' }
                ]
            },
            methods:{
                add(){
                    this.list.unshift({id:this.id,name:this.name});
                }
            }
        });
    </script>
</body>

</html>

 

posted @ 2021-01-15 09:41  dshow  阅读(46)  评论(0编辑  收藏  举报