閱讀目錄

1. v-if 指令
2. 二、v-show
3. 三、v-bind
4. 三事件處理
   • 監聽事件
   • v-on:click 簡寫成@click
   • 四、個數組列表的v-for

所謂指令系統，大家可以聯想咱們的cmd命令行工具，只要我輸入一條正確的指令，系統就開始幹活了。

在vue中，指令系統，設置一些命令之後，來操作我們的數據屬性，並展示到我們的DOM上。

OK，接下來我們一一介紹我們的指令系統的用法。

v-if 指令

<div id="app">
<h2 v-if="show"> haha</h2>

</div>

<script>
 var
 
 app = new Vue({
        el:‘#app‘,
        //所有的數據都放在數據屬性裏
        data:{
            show:true,},
created(){
//初始化數據
},
//方法:
methods:{
}

註意：show變量，是數據屬性中存儲的值。要麽真(true)要麽假(false)。該屬性值為true的時候，p標簽顯示，反之則不顯示。

也可以添加一個v-else塊。

<divv-if = ‘show‘>顯示</div>
<divv-else>隱藏</div>

另外還有v-else-if塊:

<div v-if="type === ‘thunder‘
>
  打雷
</div>
<div v-else-if="type === ‘rain‘>
  下雨
</div>

<div v-else>
  雷陣雨
</div>

二、v-show

<p v-show=‘ok‘>網站導航</p>

如果ok數據屬性值為false。

不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display

註意：v-show不支持v-else塊

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什麽也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什麽，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

三、v-bind

我們在js中常用操作dom的css樣式屬性的方法有很多，在vue中可以直接使用v-bind:class來給每個標簽元素添加class。

如下所示

使用了簡寫的形式. <div v-bind:class=" "> 等同於<div :class=" ">

大括號裏面的key是class屬性,value是數據屬性,如果為true的話 box2就會被渲染的class裏

<div class="box" :class="{box2:isRed}"></div>

data:

data:{
  isRed:true,}

結合css代碼可以顯示想要的內容

三事件處理

監聽事件

可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。

1 <div id=‘app‘>
2     <button v-on:click = ‘count+=1‘>加{{count}}</button>
3     <p>點了{{count}}次</p>
4 </div>

1 var app = new Vue({
2     el:‘#app‘,
3     data:{
4        count:0 
5     } 
6 })

然而許多事件處理邏輯會更為復雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調用的方法名稱

v-on:click 簡寫成@click

1 <div id=‘app‘>
2     <button @click = ‘countClick‘>加{{count}}</button>
3     <p>點了{{count}}次</p>
4 </div>

 var app = new Vue({
   el:‘#app‘,
    data:{
       count:0 
    },
    methods:{
       countClick(){
           this.count+=1;
       }
    }
 })    

四、個數組列表的v-for

<ul>
    <li v-for="(item,index) in ImgAttr" ">{{index+1}}</li>
</ul>

data:{

ImgAttr:[
                {id:1,src:‘./1.jpg‘},
                {id:2,src:‘./2.jpg‘},
                {id:3,src:‘./3.jpg‘},
                {id:4,src:‘./4.jpg‘}
            ],
}

可以有index索引

初始值為0

vue指令系統