【測試平臺開發】Vue雙向資料繫結、分支語句與遍歷語句學習教程

进击的bug~發表於2024-11-29
Vue

Vue.js是一種現代化且靈活的前端框架，以其易用性、靈活性和高效能吸引了眾多開發者的關注。今天將詳細介紹Vue.js中的雙向資料繫結、分支語句和遍歷語句

一、Vue.js雙向資料繫結

雙向資料繫結是Vue.js的核心特性之一，它允許開發者在表單元素和Vue例項之間建立雙向資料繫結。當表單元素的值發生變化時，Vue例項中的資料也會相應更新，反之亦然。

1. v-model指令

v-model指令是實現雙向資料繫結的主要方法。它通常用於表單控制元件，如輸入框、核取方塊、單選按鈕和選擇框。

示例：
<div id="app">
  <input type="text" v-model="message" placeholder="輸入你的資訊">
  <p>{{ message }}</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: ''
  }
});
</script>

在這個示例中，當使用者在輸入框中輸入內容時，message變數的值會自動更新，並且顯示在p標籤中。同樣地，當message變數的值在Vue例項中發生變化時，輸入框中的內容也會自動更新。

2. v-model修飾符

v-model提供了三個修飾符：lazy、number和trim。
1)lazy：在輸入框失去焦點或按下Enter鍵時才更新資料。
2)number：將輸入的內容轉為number型別。
3)trim：去除輸入內容左右兩邊的空格。

示例：
<div id="app">
  <input type="text" v-model.lazy="keyword" placeholder="搜尋">
  <input type="text" v-model.number="age" placeholder="年齡">
  <input type="text" v-model.trim="name" placeholder="姓名">
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    keyword: '',
    age: null,
    name: ''
  }
});
</script>

二、Vue.js分支語句

Vue.js中的分支語句主要用於根據條件控制DOM元素的顯示和隱藏。常用的分支語句有v-if、v-else-if、v-else和v-show。

1. v-if、v-else-if、v-else

v-if指令用於根據表示式的真假值來渲染或銷燬元素。v-else-if和v-else分別用於提供額外的條件塊。

<div id="app">
  年齡：<input type="number" v-model="age">
  <div v-if="age < 18">未成年</div>
  <div v-else-if="age >= 18 && age < 60">成年</div>
  <div v-else>老年</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    age: 25
  }
});
</script>

2. v-show

v-show指令用於根據表示式的真假值來切換元素的CSS屬性display。與v-if不同，v-show只是簡單地切換元素的可見性，而不會銷燬或重新渲染元素。

示例：
<div id="app">
  <input type="checkbox" v-model="isVisible"> 顯示/隱藏
  <div v-show="isVisible">這個元素會根據checkbox的狀態顯示或隱藏</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});
</script>

三、Vue.js遍歷語句

Vue.js中的遍歷語句主要用於迴圈渲染陣列或物件的元素。常用的遍歷語句有v-for。

1. 遍歷陣列

v-for指令可以遍歷陣列，併為每個元素生成一個DOM元素。

示例：
<div id="app">
  <ul>
    <li v-for="(item, index) in fruits" :key="index">{{ index }} - {{ item }}</li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    fruits: ['蘋果', '香蕉', '橙子']
  }
});
</script>

2. 遍歷物件

v-for指令也可以遍歷物件的屬性。

示例：
<div id="app">
  <ul>
    <li v-for="(value, key) in person" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    person: {
      name: '張三',
      age: 30,
      gender: '男'
    }
  }
});
</script>

3. 遍歷指定次數

v-for指令還可以用於迴圈指定次數。

示例：
<div id="app">
  <ul>
    <li v-for="n in 5" :key="n">{{ n }}</li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app'
});
</script>

今日分享到此，堅持每日打卡，一步步深入測試平臺開發的精髓。讓我們攜手並進，在知識的海洋中遨遊，共同探索技術的無限可能。我相信，透過我們的共同努力與堅持，你一定能夠掌握測試平臺開發的技能，實現自己的技術夢想。讓我們一起加油，讓學習成為我們生活中最美好的習慣！

相關文章