js教程

Vue.js中常用指令有哪些

一个新手

Oct 06, 2017 am 10:40 AM

javascriptvue.js哪些

名詞特殊的行為，我們可以將指令視為特殊的HTML特性。

Vue.js提供了一些內建指示，現在來介紹常用的內建指示。

v-if指令

## v-if是條件渲染指令，它根據表達式的真假來新增或刪除元素，它的基本語法：v-if = "expression"，expression是一個bool值的表達式，該表達式既可以是bool屬性，也可以是一個傳回bool的運算符，如下列程式碼：

#渲染後的頁面如下圖：

##渲染後的頁面如下圖：

透過控制台可以看到渲染的HTML程式碼只包含這三個

元素，如下圖：#

##11 也可以在控制台上修改data屬性的值，例如將yes的值改為false，即vm.yes = false，那麼頁面中的Yes就會被刪除，vm作為vue的實例，之所以可以直接存取data裡的屬性是因為每個vue實例都會代理其選項物件裡的data屬性。

############### 記住：使用v-if指令時，只有表達式為真的元素才會被渲染，這是和下一個將要介紹的v-show指令的區別。 ######################## ### ###v-show指示################################################################################## ############## v-show指令也是條件渲染指令，剛剛也提到了v-if指令和v-show指令有一個差別，這個差別就是v-show指令的元素都會被渲染，只是表達式為假的元素會被設定css屬性display:none，將其隱藏。如下圖：######################## ######################################################################################################################################################################################## #### ### ######### v-else指令############################## ######### v-else指令必須跟在v-if指令或v-show指令後面，否則它無法被辨識。 ################

v-else指令的元素是否被渲染到HTML中主要看基於vue.js版本，如果是2.x版本，那麼不管前面是v-if指令還是v-show指令，當前面指令為真時，v-else指令的元素都不會被渲染到HTML中，如果是1.x版本，取決於前面是v-if指令還是v-show指令；

前方為v-if指令時，且指令為真，則v-else指令就不會被渲染到HTML中；

前方為v-show指令時，且指令為真，v-else指令仍會被渲染到HTML中，只是會為其設定css屬性display:none，將其隱藏;

v-for指令

# v-for指令與javascript的遍歷語法相似，即基於一個陣列渲染一個列表，語法為：v-for = "item in items"，items為數組，item為遍歷的數組元素。如以

下程式碼：

<!DOCTYPE html><html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>

    <body>
        <p id="app">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Sex</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="person in people">
                        <td>{{ person.name  }}</td>
                        <td>{{ person.age  }}</td>
                        <td>{{ person.sex  }}</td>
                    </tr>
                </tbody>
            </table>
        </p>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                people: [{
                    name: &#39;Jack&#39;,
                    age: 30,
                    sex: &#39;Male&#39;
                }, {
                    name: &#39;Bill&#39;,
                    age: 26,
                    sex: &#39;Male&#39;
                }, {
                    name: &#39;Tracy&#39;,
                    age: 22,
                    sex: &#39;Female&#39;
                }, {
                    name: &#39;Chris&#39;,
                    age: 36,
                    sex: &#39;Male&#39;
                }]
            }
        })    </script></html>

View Code

##-bind指令

##################################################################################################### ##### v-bind指令可以在後面帶一個參數，用冒號隔開，這個參數一般是HTML元素的特性（attribute）,，例如：v-bind:class######### ###如下列程式碼： ############################

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>
    <body>
        <p id="app">
            <ul class="pagination">
                <li v-for="n in pageCount">
                    <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? &#39;active&#39; : &#39;&#39;">{{ n + 1 }}</a>
                </li>
            </ul>
        </p>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                activeNumber: 1,
                pageCount: 10
            }
        })    </script></html>

######View Code################################################################## ## ### 使用v-bind指令作用於元素的class上，為目前頁面設定css樣式。 ############ 這裡要注意的是遍歷pageCount時，vue.js版本的差異會導致遍歷的開始不同;############ ########### .x時，遍歷是從0開始的，一直到pageCount-1結束；############# 當版本為2.x時，遍歷是從1開始的，一直到pageCount結束。 ############ ########## v-on指示##################### v-on指令用於監聽DOM事件，它的用法與v-bind類似，例如監聽點擊事件：v-on:click="doSomething"############ 有兩種形式呼叫方法：綁定一個方法，即將事件指向方法的參考######

使用内联语句

如下代码：Greet按钮就是使用第一种方法，即将事件绑定到greet()方法，而Hi按钮直接调用say()方法

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="app">
            <p><input type="text" v-model="message"></p>
            <p>
                <!--click事件直接绑定一个方法-->
                <button v-on:click="greet">Greet</button>
            </p>
            <p>
                <!--click事件使用内联语句-->
                <button v-on:click="say(&#39;Hi&#39;)">Hi</button>
            </p>
        </p>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                message: &#39;Hello, Vue.js!&#39;
            },            // 在 `methods` 对象中定义方法            
            methods: {
                greet: function() {                    // // 方法内 `this` 指向 vm                    
                alert(this.message)
                },
                say: function(msg) {
                    alert(msg)
                }
            }
        })    
        </script></html>

View Code

v-bind与v-on的缩写方式

v-bind可以缩写为一个冒号，v-on可以缩写为一个@符号，如下：

以上是Vue.js中常用指令有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。