Vue基礎系列（五）——Vue中的指令（中）

時間 2020-05-22

標籤 vue 基礎系列指令简体版

原文原文鏈接

寫在前面的話：javascript

文章是我的學習過程當中的總結，爲方便之後回頭在學習。html

文章中會參考官方文檔和其餘的一些文章，示例均爲親自編寫和實踐，如有寫的不對的地方歡迎你們和我一塊兒交流。vue

VUE基礎系列目錄

《VUE基礎系列（一）——VUE入坑第一篇》java

《VUE基礎系列（二）——VUE中的methods屬性》npm

《VUE基礎系列（三）——VUE模板中的數據綁定語法》數組

《VUE基礎系列（四）——VUE中的指令（上）》ide

《VUE基礎系列（五）——VUE中的指令（中）》函數

一.v-model

v-model是做用於input/textarea等表單控件的雙向數據綁定指令，當咱們修改表單元素的內容，會自動的更新vue中的數據學習

#示例　spa

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(中)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='box'>
        <input v-model='msg' type='text'/>
        <br> 這裏是msg的值：{{msg}} </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data: { msg: 'hello' } }); </script>
</body>
</html>

#結果

　　咱們能夠清楚的看到，當咱們改變了input輸入框的內容時，數據自動的更新到了msg中，相應的輸入框下方的的值也發生了變化，這就是v-model的特性。

二.v-show

v-show稱爲vue中的條件渲染，它能夠控制元素的隱藏和顯示：經過元素的display屬性值去控制。用法也比較簡單，咱們直接看示例。

#示例

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(中)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='box'>
        <h1 v-show='hideValue'>我是一段文本，會被隱藏</h1>
        <h1 v-show='showValue'>我是一段文本，會正常顯示</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data: { showValue: true, hideValue: false } }); </script>
</body>
</html>

#結果

　　能夠看到，當v-show中的表達式的值爲真時，文本會正常顯示；爲假時，元素會添加一個內聯元素：display:none;

注意：在javascript中，表達式的條件爲真不僅是它的值爲true，爲假的也不必定是false。

三.v-if / v-else /v-else-if

　　v-if也是屬於vue中的條件渲染指令，做用同v-show同樣用於控制元素的顯示和隱藏，不同的是v-if的javascript表達式爲假時，元素不會存在於DOM文檔中的。

#示例

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(中)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <h1 v-if='isDisplay'>isDisplay爲真</h1>
        <h1 v-if='hideValue'>hideValue爲假,該元素不會顯示在界面上,也不會出如今DOM文檔中</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data: { isDisplay: true, hideValue: false } }) </script>
</body>
</html>

#結果

　　能夠看到hideValue爲假，因此對應的h1元素並無存在於DOM文檔中。

四.v-for

　　v-for指令用於循環渲染一組數據（數組或者對象）。下面咱們使用v-for指令輸入一下數組和對象的值。

#v-for循環數組

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(中)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for='item in arr'> {{item}} </li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data: { arr: ['今天','起牀','很早','心情','不錯'] } }) </script>
</body>
</html>

　　v-for除了循環出每個數組元素item以外，還支持第二個參數做爲數組的下標。

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(中)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div id="box">
        <ul>
            <li v-for='(item,index) in arr'>下標爲{{index}}的數據爲：{{item}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data: { arr: ['今天','起牀','很早','心情','不錯'] } }) </script>
</body>
</html>

#v-for循環對象

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(中)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">        
        <!-- 循環對象：第一種 -->
        <ul>
            <li v-for='item in obj'>{{item}}</li>
        </ul>

        <!-- 循環對象：第二種 -->
        <ul>
            <li v-for='(item,key) in obj'>{{key}}:{{item}}</li>
        </ul>

    </div>

    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data: { arr: ['今天','起牀','很早','心情','不錯'], obj:{ name: 'test', age: 20, desc: '堅持就是苦逼' } } }) </script>
</body>
</html>

五.v-on

v-on指令用於監聽元素的事件，在事件觸發時，能夠執行一個javascript表達式或者執行一個javascript函數。

#基本的語法

<el on:click="javascript表達式或者javascript函數"> </el>

或者

<el @click="javascript表達式或者javascript函數"> </el>

#示例

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(中)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <button v-on:click="clickMe">點擊我,我會調用一個函數</button>
        <hr>
        <button v-on:click="counter++">點擊我,count就會加1</button>
        <p>counter = {{counter}}</p>
        <hr> v-on:的另一種寫法@click <button @click="counter++">點擊我,count就會加1</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data: { counter: 0 }, methods: { clickMe: function(){ // 事件對象
 console.log(event); // 事件綁定的元素
 console.log(event.target); } } }) </script>
</body>
</html>