vue學習筆記-2

测试微思录-静水流深發表於2024-06-29
Vue筆記

1.模板語法

文字插值

<template>

<p>{{ msg }}</p><br/>
<p>{{ num+1 }}</p><br/>
<p>{{ ok?"yes":"no" }}</p>
</template>
<script>
export default{
  data(){
    return{
      msg:"模板語法",
      num:1,
      ok:false
    }
  }
}

</script>

2.屬性繫結

透過v-bind指令可以給元素繫結屬性，且設定屬性時不能使用文字插值，v-bind可以簡寫只寫後邊的冒號省略v-bind

<template>

<p v-bind:class="testclass">{{ msg }}</p><br/>
<button :disabled="isbuttondisabled">按鈕</button>
</template>
<script>
export default{
  data(){
    return{
      msg:"測試",
      testclass:"test",
      isbuttondisabled:false
    }
  }
}

</script>
<style scoped>
.test{
  color:red;
  fontsize:30px;
}

</style>

3.條件渲染

v-if:條件表示式為真時才能被渲染；v-elseif可以多次使用；v-else所有條件不滿足時才被渲染
v-show:僅僅是改變了元素的display屬性

<template>
<p>條件渲染</p>
<p v-if="type=='A'">A</p>
<p v-else-if="type=='B'">B</p>
<p v-else-if="type=='C'">C</p>
<p v-else>不是A/B/C</p>
<p v-show="flag">show文字</p>
</template>
<script>
export default{
  data(){
    return{
      type:'E',
      flag:false
    }
  }
}

</script>

4.列表渲染

v-for指令可以用來渲染一個列表，要使用特殊語法：item in items,items是源資料的陣列，item是迭代項的別名.
v-for也支援使用可選的第二個參數列示當前項的位置索引。另外，in也可以換成of，即item of items
v-for還可以用來遍歷一個物件的所有屬性

<template>
<div>列表渲染</div>
<div v-for="(item,index) in names">{{ item }}-{{ index }}</div>
<div v-for="item in students">{{ item.name }}:{{ item.age }}</div>
<div v-for="(item,index) of names">{{ item }}-{{ index }}</div>
<div>
  <p v-for="(value,key,index) of userInfo">{{ value }}-{{ key }}-{{ index }}</p>
</div>
</template>
<script>
export default{
  data(){
    return{
      names:["amy","tom","mandy"],
      students:[{"name":"zhangsan","age":18},{"name":"lisu","age":20},{"name":"wangwu","age":21}],
      userInfo:{
        "name":"Monica",
        "sex":"female",
        "age":23
      }
    }
  }
}

</script>

5.透過key管理狀態

在列表迴圈時需要為迴圈的物件新增key屬性減少效能消耗。且key的要求是唯一不變，數值或字串型別。

相關文章