<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        對vue中v-if的常見使用方法詳解

        來源:懂視網 責編:小采 時間:2020-11-27 22:06:54
        文檔

        對vue中v-if的常見使用方法詳解

        對vue中v-if的常見使用方法詳解:使用過Vue的小伙伴一定使用過v-if 這個屬性,但是這個屬性主要是來干什么的呢,他得用途是那些? 這里我總結了一下,v-if使用一般有兩個場景: 1- 多個元素 通過條件判斷展示或者隱藏某個元素?;蛘叨鄠€元素 2- 進行兩個視圖之間的切換 下面我寫了兩個例子,
        推薦度:
        導讀對vue中v-if的常見使用方法詳解:使用過Vue的小伙伴一定使用過v-if 這個屬性,但是這個屬性主要是來干什么的呢,他得用途是那些? 這里我總結了一下,v-if使用一般有兩個場景: 1- 多個元素 通過條件判斷展示或者隱藏某個元素?;蛘叨鄠€元素 2- 進行兩個視圖之間的切換 下面我寫了兩個例子,

        使用過Vue的小伙伴一定使用過v-if 這個屬性,但是這個屬性主要是來干什么的呢,他得用途是那些?

        這里我總結了一下,v-if使用一般有兩個場景:

        1- 多個元素 通過條件判斷展示或者隱藏某個元素。或者多個元素

        2- 進行兩個視圖之間的切換

        下面我寫了兩個例子,是Vue官方的簡單實例。

        第一個實例實現了 type等于不同值,A,B,C 三個元素的展示情況。

        第二個例子實現了,點擊按鈕實現兩個視圖的切換。

        <!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>Vue中v-if的常見使用</title>
         <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
        </head>
        <script>
        window.onload = function(){
        
         //創建一個vue實例
         var app = new Vue({
         el: '#app',
         data: {
         type:'C',
         loginType:'username'
         },
         methods:{
         changeloginType(){
         let self = this;
         if(self.loginType=='username'){
         self.loginType = ''
         }else{
         self.loginType = 'username'
         }
         }
         }
         })
        }
        
        </script>
        <body>
         <div id="app">
         <div style="color:red">v-if的簡單實用</div>
         <template>
         <div v-if="type == 'A'">
         A
         </div>
         <div v-else-if="type=='B'">
         B
         </div>
         <div v-else>
         C
         </div>
         </template>
         <div style="color:green">v-if的彈框切換</div>
         <template v-if="loginType === 'username'">
         <label>用戶名:</label>
         <input placeholder="Enter your username" key="username-input">
         </template>
         <template v-else>
         <label>密碼:</label>
         <input placeholder="Enter your email address" key="email-input">
         </template>
         <button @click="changeloginType">切換狀態</button>
         </div>
        </body>
        </html>
        

        效果圖:

        vue v-if

        vue v-if

        以上這篇對vue中v-if的常見使用方法詳解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        對vue中v-if的常見使用方法詳解

        對vue中v-if的常見使用方法詳解:使用過Vue的小伙伴一定使用過v-if 這個屬性,但是這個屬性主要是來干什么的呢,他得用途是那些? 這里我總結了一下,v-if使用一般有兩個場景: 1- 多個元素 通過條件判斷展示或者隱藏某個元素。或者多個元素 2- 進行兩個視圖之間的切換 下面我寫了兩個例子,
        推薦度:
        標簽: VUE if vue中
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲人成7777影视在线观看| 精品亚洲国产成人av| 久久国产精品亚洲综合| 亚洲免费在线播放| 亚洲av永久无码嘿嘿嘿| 在线精品自拍亚洲第一区| 最近国语视频在线观看免费播放| 一级成人a毛片免费播放| 99久久免费精品国产72精品九九| 亚洲AV日韩精品一区二区三区| 久久精品国产亚洲网站| 2017亚洲男人天堂一| v片免费在线观看| 你懂的免费在线观看| 中文字幕第一页亚洲| 亚洲一本之道高清乱码| 亚洲成人免费网址| 亚洲精品动漫人成3d在线| 亚洲黄色免费网站| 日日狠狠久久偷偷色综合免费| 99免费在线观看视频| av无码东京热亚洲男人的天堂| 亚洲av成人一区二区三区观看在线| 免费人成毛片动漫在线播放| 日韩精品免费一区二区三区| 亚洲av色影在线| 久久国产色AV免费观看| 国产亚洲精品看片在线观看| 色婷婷精品免费视频| 可以免费看黄视频的网站| 国产亚洲一区区二区在线 | 国产美女做a免费视频软件| 久久精品7亚洲午夜a| 日韩亚洲综合精品国产| 免费大黄网站在线看| 亚洲AV一二三区成人影片| 免费A级毛片无码免费视| 国产亚洲综合视频| 亚洲国产精品无码成人片久久| 67194国产精品免费观看| 亚洲码欧美码一区二区三区|