学习vue第六节，v-if、v-show、v-for

vue 中的v-if和v-show

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
      <div id="app">
    
        <!-- <input type="button" value="toggle" @click="toggle"> -->
        <input type="button" value="toggle" @click="flag=!flag">
    
        <!-- v-if 的特点：每次都会重新删除或创建元素 -->
        <!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->
    
        <!-- v-if 有较高的切换性能消耗 -->
        <!-- v-show 有较高的初始渲染消耗 -->
    
        <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
        <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->
        <h3 v-if="flag">这是用v-if控制的元素</h3>
        <h3 v-show="flag">这是用v-show控制的元素</h3>
    
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false
          },
          methods: {
            /* toggle() {
              this.flag = !this.flag
            } */
          }
        });
      </script>
    </body>
</html>

 v-for的使用方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <!-- 得到数组索引为0的值 -->
            <!-- <p>{{list[0]}}</p> -->
            <!-- 1.v-for循环遍历普通数组 -->
            <!-- <p v-for="(item,i) in list">索引：{{i}}  值：{{item}}</p> -->
            <!-- 2.v-for循环遍历对象数组 -->
            <!-- <p v-for="(user,i) in arr">索引：{{i}}  用户id：{{user.uid}}  用户名：{{user.name}}</p> -->
            <!-- 3.v-for循环遍历对象 -->
            <!-- <p v-for="(value,key,i) in obj">索引： {{i}}  键是： {{key}}  值是： {{ value }}</p> -->
            
            <!-- 3.v-for循环遍历. 不仅普通数组，对象数组，对象， 还可以放数字 
                 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
            <p v-for="count in 10">这是第 {{ count }} 次循环</p>

        </div>
        <script type="text/javascript">
            new Vue({
                el:"#app",
                data:{
                    list:[1,2,3,4,5,6,7],
                    arr:[
                        {uid:1,name:"张三1"},
                        {uid:2,name:"张三2"},
                        {uid:3,name:"张三3"},
                        {uid:4,name:"张三4"},
                        {uid:5,name:"张三5"}
                    ],
                    obj:{
                        name:"李四",
                        old:20,
                        sex:"男"
                    }
                    
                }
                
            })
        </script>
    </body>
</html>

 

v-for小练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
      <div id="app">
    
        <div>
          <label>Id:
            <input type="text" v-model="id">
          </label>
    
          <label>Name:
            <input type="text" v-model="name">
          </label>
    
          <input type="button" value="添加" @click="add">
        </div>
    
        <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
        <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
        <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
        <p v-for="(item,i) in list" :key="item.id">
          <input type="checkbox">{{i}}--{{item.id}} --- {{item.name}}
        </p>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            id: '',
            name: '',
            list: [
              { id: 1, name: '李斯' },
              { id: 2, name: '嬴政' },
              { id: 3, name: '赵高' },
              { id: 4, name: '韩非' },
              { id: 5, name: '荀子' }
            ]
          },
          methods: {
            add() { // 添加方法
              this.list.unshift({ id: this.id, name: this.name })
            }
          }
        });
      </script>
    </body>
</html>

 

posted @ 2020-05-04 21:45  三线码工  阅读(326)  评论(0)  编辑  收藏  举报