快捷導(dǎo)航

Vue中判斷語(yǔ)句與循環(huán)語(yǔ)句基礎(chǔ)用法及v-if和v-for的注意事項(xiàng)詳解

更新時(shí)間：2022年08月03日 11:00:52 作者：小余努力搬磚

在Vue指令中,最經(jīng)常被用于做邏輯操作的指令,下面這篇文章主要給大家介紹了關(guān)于Vue中判斷語(yǔ)句與循環(huán)語(yǔ)句基礎(chǔ)用法及v-if和v-for注意事項(xiàng)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

一、判斷語(yǔ)句

v-if、v-else、v-else-if

v-if是判斷是否將DOM元素顯示出來(lái)

不滿(mǎn)足條件的元素，會(huì)直接刪除，不會(huì)存在瀏覽器上面

v-show

也是用來(lái)判斷，是否將DOM元素在頁(yè)面上顯示，但是與v-if有著區(qū)別，它的不顯示是通過(guò)display:none;實(shí)現(xiàn)的，還是存在瀏覽上。

   <div id="app">
        <h2 v-if="age<18">未成年</h2>
        <h2 v-else-if="age<60">壯年</h2>
        <h2 v-else>老年</h2>
        <h2 v-show="flag">show</h2>
        <h2 v-if="flag">if</h2>
    </div>
   
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return{
                    age:71,
                    flag:false//true會(huì)顯示，false不會(huì)顯示 
                }
            }
        })
    </script>

如下圖片顯示，不存在時(shí)v-if和v-show的顯示狀態(tài)

可以發(fā)現(xiàn)show是被display:none;影藏起來(lái)了

if已經(jīng)從這個(gè)世界上消失了

案例

這里用簡(jiǎn)單的if判斷，可以通過(guò)按鈕控制不同的輸入模式

這里也會(huì)出現(xiàn)一個(gè)細(xì)節(jié)上的問(wèn)題，因?yàn)閂ue會(huì)出現(xiàn)大量的復(fù)用情況，所以這里需要在input表單中設(shè)置一個(gè)key值，使其出現(xiàn)差別，在以輸入內(nèi)容的表單，切換后內(nèi)容會(huì)也會(huì)被取消掉。

   <div id="app">
        <span v-if="usname">
            <label for="uname">用戶(hù)名</label>
            <input type="text" id="username" placeholder="輸入用戶(hù)名" key="index">
        </span>
        <span v-else="usname">
            <label for="email">用戶(hù)名郵箱</label>
            <input type="text" id="email" placeholder="輸入郵箱" key="index1">
        </span>
        <button @click="usname=!usname">選擇</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return{
                    usname:true
                }
            }
        })
    </script>

二、循環(huán)語(yǔ)句

如下案例

遍歷數(shù)組

是通過(guò)循環(huán)來(lái)實(shí)現(xiàn)點(diǎn)擊變色，這里遍歷出了下標(biāo)和內(nèi)容，在頁(yè)面上顯示出來(lái)

v-for="(item,index) in list"

item值index索引

    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li :class="currentIndex==index?'active':''" @click="change(index)" v-for="(item,index) in list">{{index}}--{{item}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    currentIndex:0,
                    list:["海王","海賊王","火影忍者","復(fù)仇者聯(lián)盟"],
                }
            },
            methods:{
                change(index){
                    this.currentIndex=index
                }
            }
        })
    </script>
</body>

遍歷對(duì)象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 1.遍歷過(guò)程沒(méi)有使用index索引-->
    <!-- 格式為：(value, name) -->
    <ul>
      <li v-for="(item,key) in user" >{{key+"-"+item}}</li>
    </ul>
    <!-- 格式為：(value, name, index) -->
    <ul>
      <li v-for="(item,key,index) in user" >{{key+"-"+item+"-"+index}}</li>
    </ul>
 
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        user:{
          name:"zzz",
          height:188,
          age:24
        }
      }
    })
  </script>
</body>
</html>

三、v-if和v-for的注意事項(xiàng)

如果將v-if和v-for 在同一個(gè)標(biāo)簽內(nèi)使用，會(huì)出現(xiàn)每次先循環(huán)，在去判斷渲染，在性能上出現(xiàn)了浪費(fèi)

要注意這個(gè)細(xì)節(jié)，在寫(xiě)代碼時(shí)，可以將for包含到if判斷中，使其不在一個(gè)標(biāo)簽內(nèi)，從而避免了同是使用的情況。

這里，還會(huì)出現(xiàn)一個(gè)問(wèn)題，如果使用index為索引，在渲染表單的時(shí)候就會(huì)出現(xiàn)，表單添加，表單內(nèi)容沒(méi)有出現(xiàn)變化，需要自己起一個(gè)唯一標(biāo)志符。

附：根據(jù)某一個(gè)與待循環(huán)列表無(wú)關(guān)的屬性決定是否展示渲染后的數(shù)組對(duì)象時(shí)，可以把 v-if 上移。

例子：根據(jù) isShow 屬性決定是否顯示 users 列表

users: [
        {'name': '111'},
        {'name': '222'},
        {'name': '333'},
        {'name': '444'}
      ],

isShow: true

改良前：

<ul>
  <li v-for="user in users" v-if="isShow">
    {{ user.name }}
  </li>
</ul>

改良后：

<ul v-if="isShow">
  <li v-for="user in users">
    {{ user.name }}
  </li>
</ul>

總結(jié)

到此這篇關(guān)于Vue中判斷語(yǔ)句與循環(huán)語(yǔ)句基礎(chǔ)用法及v-if和v-for的注意事項(xiàng)詳解的文章就介紹到這了,更多相關(guān)Vue判斷語(yǔ)句與循環(huán)語(yǔ)句用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: