Vue框架整理：vue.js內建指令 v-if、v-for 、處理載入時閃動未處理的資料

阿新 • • 發佈：2019-01-19

這裡寫圖片描述

vue 基本指令：

v-cloak : 一般被用在網速較慢，Vue還沒有載入完成時，不過當Vue建立例項後內容就會被替換掉，並且螢幕會有一點閃動，
使用時最好配合的加一句CSS : [v-cloak]{ display:none;}
這個指令在小專案裡有時會用，複雜的大專案會用其他的方法

（有時v-clock 也不能很好的處理閃動問題，建議可以自己手寫，在顯示的元素上新增一個自定義的類名或者ID，css中隱藏，編輯JS時在頁面載入完成後將元素顯示：）

<script>
    //jQuery示例：       id:v1先用CSS設定為display:none 

    $(document).ready(function () {
       $("#v1").css("display","block"); 
    });
</script>

v-once :主要用於它的元素或元件只能被渲染一次，包括他所有的後代元素，渲染成功後，不會再變化

示例程式碼：

<body>

<div id="v1">
    <p v-clock>{{ txt1 }}</p>

    <p v-once>{{ txt2 }}</p>

</div>

<script 
 src="vue.min.js"></script>
<script>
    var app=new Vue({
        el:"#v1",
        data:{
            txt1:"基本指令1",
            txt2:"基本指令2"
        }
    })
</script>

這裡寫圖片描述

條件渲染指令：

v-if v-else-if v-else
類似於JS的if 判斷，不過寫在JS中的程式碼會直接判斷後在渲染，這裡會根據我們的需求渲染引號”“中值為true的內容，銷燬其他的元素

<div 
 id="v1">

    <p v-if="!a"> a 為 false 顯示</p>

    <p v-else-if="a==2"> a 為2 顯示</p>

    <p v-else="a">a 為 true 顯示</p>

</div>

<script>
    var app=new Vue({
        el:"#v1",
        data:{
            a:true
        }
    })
</script>

v-show :
與v-if 比較類似的用法，不過v-if判斷是通過判斷決定渲染哪一條，v-show不論條件判斷都會渲染元素，只是判斷結果為false的通過CSS的display:none 來隱藏


<div id="v1">
    <p v-show="a"> a 為 true 顯示</p>
    <p v-show="!a"> a 為 false 顯示</p>
</div>

<script>
    var app=new Vue({
        el:"#v1",
        data:{
            a:true
        }
    })
</script>

迴圈指令：

v-for：
顯示的資料需要迴圈顯示時需要用到這個

這裡寫圖片描述

或者也可以用of代替in作為分隔符，另外，v-for也可以放在內建標籤 template 上，例如：


<div id="v1">
    <template v-for=" v of val">
        <p>{{v.id}} 、 {{v.name}}</p>
    </template>
</div>

除了陣列外，可以遍歷物件的屬性：



<div id="v1">
    <p v-for="v in val">{{ v }}</p>
</div>

<script src="vue.min.js"></script>

<script>

    var app=new Vue({
        el:"#v1",
        data:{
            val:{
                name:"張三",
                age:"30"
            }
        }
    })
</script>

輸出效果：

這裡寫圖片描述

遍歷物件的時候可以選填兩個引數： key 與 index
(js 部分跟上面一樣，這裡就不多打一遍了)


<div id="v1">
    <p v-for="( v,key,index) in val">{{index}} - {{ key }} - {{ v }}</p>
</div>

輸出效果：
這裡寫圖片描述

這裡寫圖片描述

Vue框架整理：vue.js內建指令 v-if、v-for 、處理載入時閃動未處理的資料

vue 基本指令： v-cloak : 一般被用在網速較慢，Vue還沒有載入完成時，不過當Vue建立例項後內容就會被替換掉，並且螢幕會有一點閃動，使用時最好配合的加一句CSS : [v-cloak]{ display:none;} 這個指令在小

Vue框架整理：動態設定樣式style、class

先來說一下： :class 是可以與一般用class 並存的動態新增的類名是基於資料的，當對應的資料為 true 時會顯示，否則沒有物件語法：繫結單個class: <!DOCTYPE html> <html lang=

Vue框架整理：全域性元件、區域性元件、特殊元件建立方法

vue的元件也是需要註冊後才可以使用的，註冊有全域性註冊和區域性註冊兩種；全域性元件註冊後，任何vue例項都可以用： <div id="v1"> <first-component></first-componen

主流前端框架對比：Vue.js , React, Angular.js

.cn angular nbsp 入門 react 如果 blog reac 示例個人認為Vue.js的文檔最懇切。我認為結合文檔和遇到問題Google答案的匹配度來講：Vue.js > ReactJS > AngularJS > Angular 2

VUE：內建指令與自定義指令

VUE：內建指令與自定義指令常用的內建指令 1）v:text　　更新元素的 textContent 2）v-html　　更新元素的 innerHTML 3）v-if　　如果為true，當前標籤才會輸出到頁面 4）v-else　　如果為false，當前標籤才會輸出到頁面 5）v-show　　通過控

vue學習：內建指令

1、v-bind：響應並更新DOM特性；例如：v-bind:href v-bind:class v-bind:title v-bind:bb 2、v-on：用於監聽DOM事件；例如：v-on:click v-on:keyup 3、v-mode

Vue.js入門-內建指令v-html

詳細：更新元素的 innerHTML 。注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯。如果試圖使用 v-html 組合模板,可以重新考慮是否通過使用元件來替代。例項：

七週七種前端框架四：Vue.js 元件和元件通訊

基本是按照官網的 Guide 全部梳理了一遍：http://vuejs.org/guide/index.html 這裡我們以一個 Todo List 應用為例來把相關的只是都串起來，這篇裡面的全部程式碼都在github上 https://github.com/l

Vue框架下的node.js安裝教程

操作 ptr dev 語言開啟 ins 安裝教程技術 tao Vue框架下的node.js安裝教程 python服務器、php ->aphche、java ->tomcat、 iis -->它是一個可以運行JAVASCRIPTR 的運

Vue內建指令

1、v-bind：響應並更新DOM特性；例如：v-bind:href v-bind:class v-bind:title 等等主要用法是繫結屬性，動態更新HTML元素上的屬性； 1 2 3 4 5 6 7 8 9 10 11

Vue(四) 內建指令

現在介紹 Vue.js 中更多的內建指令基本指令 v-cloak v-cloak 不需要表示式，它會在 Vue 例項結束編譯時從繫結的 HTML 元素上移除，經常和 CSS 的 display: none; 配合使用： <div id="app" v-cloak> {

vue內建指令詳解

指令是Vue模板中最常用的一項功能，它帶有字首v-，主要職責是當其表示式的值改變時，相應的將某些行為應用在 DOM 上。這篇文章主要介紹了vue內建指令詳解,需要的朋友可以參考下指令 (Directives) 是帶有 v- 字首的特殊屬性，職責是，當表示式的值改變時，將其產生的連帶影響，響應式地作用於

Vue的理解：Vue.js新手入門指南----轉

最近在逛各大網站，論壇，以及像SegmentFault等程式設計問答社群，發現Vue.js異常火爆，重複性的提問和內容也很多，樓主自己也趁著這個大前端的熱潮，著手學習了一段時間的Vue.js，目前用它正在做自己的結業專案。在做的過程中也對Vue.js的官方文件以及其各種特性有了許多認識。作為一個之前以PH

vue內建指令與自定義指令

一、內建指令 1、v-bind：響應並更新DOM特性；例如：v-bind:href v-bind:class v-bind:title v-bind:bb 2、v-on：用於監聽DOM事件；例如：v-on:click v-on:keyup 3、v-model：

【Vue】通過自定義指令回顧 v-內建指令

Vue.js 的各種指令（Directives）更加方便我們去資料驅動 DOM，例如 v-bind、v-on、v-model、v-if、v-for、v-once 等內建指令，這些指令的職責就是當表示式改變時將某些行為應用到 DOM 上，儘量不去操作增刪改 DOM。通過了解如何去自定義指

js 內建函數reduce

return urn turn 如果數字 function 乘除 llb bsp 今天發現js的一個內建函數reduce，還是挺有意思的，寫一下我認為比較有意思的部分 1. reduce經常用於數組的疊加, 他會接受兩個參數，第一個是毀掉函數callback()，第二個

Vue源碼後記-其余內置指令（2）

model 歸類 cli undefined bject 調用默認 inpu plain 　　…… 　　指令這個講起來還有點復雜，先把html弄上來： <body> <div id=‘app‘>

Python：運算類內建函數列舉

使用都是 () 般的同時 The nbsp 版本 float 1. divmod() python3.x版本中，整除運算用 “//”，取余可以用 “%”，在某些問題中要同時得到商和余數就需要兩步運算，而使用divmod函數可以同時得到商和余數；函數有兩個參數divmo

Vue挖坑指南：[vue-router] Named Route 'XXX' has a default child route.

前言 OA系統，使用了路由的巢狀，希望在訪問子模組時，預設載入模組的預設路由。即為子模組設定預設路由。開始我們先來看看，如何為子模組設定預設的路由。這樣寫，會出現什麼問題呢？開啟控制檯看看。實踐 vue-router給我們報了兩個警告，我們一個一個

封裝一個方法實現js內建物件array的indexOf()方法

indexOf()方法需要單獨進行封裝的可能原因：陣列的位置方法是ECMAScript5為陣列例項新增的，所以支援的瀏覽器只有：IE9+、Firefox2+、Safari3+、Opera9.5和Chrome function ArrayIndexOf(arr,value){

Vue框架整理：vue.js內建指令 v-if、v-for 、處理載入時閃動未處理的資料

vue 基本指令：

條件渲染指令：

迴圈指令：

相關推薦