image.png

v-if命令--根據條件決定是否渲染某元素

v-if 條件渲染指令，根據其后表達式的bool值進行判斷是否渲染該元素；v-if指令只渲染他身后表達式為true的元素；

<div id="example01">
 <p v-if="male">Male</p>
 <p v-if="female">Female</p>
 <p v-if="age>25">Age:{{age}}</p>

</div>
 
<script>
var vm= new Vue({
 el:"#example01",
 data:{
 male:true,
 female: false,
 age:29,
 }
 })
</script>

結果

image.png

v-if 的等號右邊呢就是一個條件語句。這個條件呢和data里的對應位置進行比對，如果是真的true，就會渲染該元素

v-show

v-show和v-if功能一樣，但是原理不一樣
v-if 和 v-show的區別 - 一點點ning0_o - CSDN博客
v-if是刪除或者保留dom元素
v-show是控制css中的diaplay:none屬性。
雖然結果是一樣的額，但是實現路徑是不一樣的。

v-for

遍歷，最常見的當然是遍歷數組。如下people是個數組，數組的內容在data里給予。

<div id="example03">
 <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>
</div>
<script>

 var vm = new Vue({
 el: '#example03',
 data: {
 people: [{
 name: 'Jack',
 age: 30,
 sex: 'Male'
 }, {
 name: 'Bill',
 age: 26,
 sex: 'Male'
 }, {
 name: 'Tracy',
 age: 22,
 sex: 'Female'
 }, {
 name: 'Chris',
 age: 36,
 sex: 'Male'
 }]
 }
 })
</script>

結果

image.png

v-on監聽dom事件

如果某個dom元素被點擊或者其他，那么調用一個函數，就這個意思。
如下，給button元素綁定了一個click。v-on可以縮寫為@。
然后和之前命令不同的是。這個函數的具體內容是在methods對象中定義的。

<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

<script>
new Vue({
  el: '#app',
  data:app,
  methods: {
      //在 `methods` 對象中定義方法
    say: function (xx) {
      alert(xx)
    }
  }
})
</script>

v-on 綁定事件時，函數名加括號和不加括號有什么區別？ - 知乎
事件處理器 — Vue.js

v-bind--屬性綁定

作用就是決定是否對某元素應用某個class。（因為一般某個元素可能有好幾個class）
當然，v-bind并非只能綁定class屬性，而是說它主要用于綁定class屬性。
Vue- 對象語法 v-bind:class與對象語法的使用（重要） - 純黑的身心博客 - CSDN博客

<style>
.Color{
    color: red;
}
.Size{
    font-size: 30px;
}
</style>

<div id="app">
    <span v-bind:class="{'Color':xx1, 'Size':xx2}">我是字</span>
</div>

<script>
　　new Vue({
    　　el: "#app",
　　data:{
    　　xx1:true,
    //設置了xx1為true，然后你把true帶入到 html代碼里有xx1的地方，也就是Color：true。也就是說span元素有color這個class

    　　xx2:false
　　}
　　})
</script>

結果

image.png

我們可以傳給 v-bind:class 一個對象，以動態地切換 class 。

v-bind:class="classProperty" 中，v-bind 是指令，: 后面的 class 是參數，而 classProperty 則在官方文檔中被稱為“預期值”

v-model

用于雙綁定

總結

重點理解下v-bind和v-model。這兩個是vue特意加的