Vue 中的 v - if 和 v - show + v-for

Posted 2020-11-28 3526527690qq

v-if   v-show

v-if是动态的向DOM树内添加或者删除DOM元素；

1. v-if和v-show 都可以控制显示隐藏
2. v-if 它是没有加载DOM结构 可以叫做惰性加载 

<div id="app"><h1 v-if=‘true‘>{{msg1}}</h1> <span>显示</span> <br><h1 v-if=‘false‘>{{msg2}}</h1> <span>不显示</span> <br><h1 v-if=‘flag‘>{{msg1}}</h1> <span>显示</span> <br><h1 v-if=‘!flag‘>{{msg2}}</h1> <span>不显示</span> <br>

<hr><!-- v-if 和 v-else必须同时使用 中间不能夹杂其他内容 --><h1 v-if=‘dataList.length==0‘>暂无数据</h1><!-- <p>55555</p>  不可以有其他标签 --><h1 v-else>{{dataList[0].song}}</h1><!-- <h1 v-if=‘dataList.length!=0‘>{{dataList[0].song}}</h1>   下山  --></div><script>
         new Vue({
             el: ‘#app‘,
             data: { //属性想要渲染 必须先定义 只能写在data里面
                 msg1: ‘采菊东篱下‘,
                 msg2: ‘悠然见南山‘,
                 msg3: ‘晨兴理荒秽‘,
                 msg4: ‘带月荷锄归‘,
                 dataList: [{
                     song: ‘下山‘
                 }],
                 flag: true
             }
         })
     </script>

 

v-show是通过设置DOM元素的display样式属性控制显隐；

1. v-show 它在行内样式上添加了 display:none 来隐藏信息

 <div id="app">
         <h1 v-show=‘true‘>{{msg3}}</h1> <span>显示</span> <br>
         <h1 v-show=‘false‘>{{msg4}}</h1> <span>不显示</span> <br>
         <hr>
         <h1 v-show=‘flag‘>{{msg3}}</h1> <span>显示</span> <br>
         <h1 v-show=‘!flag‘>{{msg4}}</h1> <span>不显示</span> <br>
         <hr>
     </div>
     <script>
         new Vue({
             el: ‘#app‘,
             data: { //属性想要渲染 必须先定义 只能写在data里面
                 msg1: ‘采菊东篱下‘,
                 msg2: ‘悠然见南山‘,
                 msg3: ‘晨兴理荒秽‘,
                 msg4: ‘带月荷锄归‘,
                 dataList: [{
                     song: ‘下山‘
                 }],
                 flag: true
             }
         })
     </script>

事件方法

v-on: 简写成@ 比如 @click @blur @keydown

 <!-- 在vue中如果不传参数的情况下 那么事件方法名后面的小括号 可写可不写 
    v-on:  可以简写成@
　　　　　　　　@blur是当元素失去焦点时所触发的事件
 -->
    <div id="app">
        <!-- <button v-on:click=‘getShow‘>点击我有惊喜</button> -->
        <button v-on:click=‘getShow()‘>点击我有惊喜</button>

        <h1 v-show=‘isShow‘>{{msg}}</h1>

        <button @click=‘postData("参数")‘>点击我传参数</button>

        <h2 @click=‘getD‘>我也可以被点击奥</h2>
    </div>
    <script>
        new Vue({
            el:‘#app‘,//元素
            data:{//属性
               msg:‘春风不度玉门关‘,
               isShow:true
            },

            methods: {//方法

                //第一种写法
               getShow:function(){
                   //this代表当前vue实例
                   console.log(this,"我被触发了")
                   //更改了isShow的值
                   this.isShow = !this.isShow
               },

               //第二种写法 推荐用这个方法
               postData(n){
                   console.log(n,‘形参‘)
               }, 

               //第三种 不可行 this 的指向改变了
               getD:()=>{
                   console.log(this,‘箭头函数被触发‘)
               }
            },
        })
    </script>

v-for 事件循环

详细 的链接【借鉴链接】 ：https://www.cnblogs.com/wangyfax/p/10073159.html

 

 <div id="app">
        <h1>事件循环</h1>

        <ul>
            <li v-for=‘(item,i) in arr ‘>
              {{i+1}}-----  {{item}}
            </li>
        </ul>


        <ul>
            <li v-for=‘(item,a,b) in json‘>
                <!-- 
                    item 指的是 value
                    a 指的是 key
                    b 是索引 
                 -->
                {{item}}----{{a}}----{{b}}
            </li>
        </ul>


    </div>


    <script>
        new Vue({
            el:‘#app‘,
            data:{
               arr:[‘西瓜‘,‘车厘子‘,‘菠萝‘,‘苹果‘],
               json:{
                   name:‘小邓子‘,
                   age:25
               }
            }
        })
    </script>

 

 <!-- 在v-for中使用了：key=""使得在勾选复选框后不会不随这内容的变动而变动例如在勾选第一个后 添加一个新的内容后后勾线后的复选框不会一直是第一个 -->

   <div id="app">
        <div>
            <!-- 在这里输入 -->
            输入你喜欢的歌单01：<input type="text" v-model="val01"> 
            <!-- 添加信息 -->
            <button @click="add01"> 添加</button>
        </div>
        <hr>
        <div v-for="item in songList01" :key="item.id">
            <!-- 在v-for中使用了：key=""使得在勾选复选框后不会不随这内容的变动而变动例如在勾选第一个后
　　　　　　　　　　 添加一个新的内容后后勾线后的复选框不会一直是第一个  -->
            <input type="checkbox"> {{item.songName}}
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                val01:"",
                unm:"3",
                songList01:[
                    {id:"1",
                    songName:"第一"},
                    {id:"2",
                    songName:"第二"},
                    {id:"3",
                    songName:"第三"},
                ]
            },
            methods:{
                add01(){
                    this.songList01.unshift({id:++this.unm,songName:this.val01});
                },
            },
        })
    </script>