Vue 中的 v-text、v-model、v-html 和 v-bind

發表於 分類於
深入了解 Vue.js 的基本指令，包括 v-text、v-model、v-html 和 v-bind，學習如何在應用中靈活使用這些功能來實現數據綁定和動態渲染。

雙向綁定：v-text、v-model 和 v-html

  • v-text：將 data 中的 messageText 插入到 <div> 中。
  • v-model：用於 input 元素，實現數據的雙向綁定，允許用戶修改 data 中的資料。
  • v-html：允許在 data 中插入 HTML 標籤，並在畫面中渲染。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  {{ message }}
  <div v-text="messageText"></div>
  <div v-html="messagehtml"></div>
  <input type="text" v-model="message">
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: '我是 message',
    messageText: '我是 messageText',
    messagehtml: '<h3>哈囉 HTML</h3>'
  }
})
</script>

Vue data binding

使用 v-bind

  • v-bind：用來動態綁定 HTML 屬性。可以使用縮寫 : 來簡化語法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
    <!-- 使用 v-bind 綁定圖片來源和類名 -->

    <!-- 未縮寫 -->
    <img v-bind:src="imgSrc" alt=""  v-bind:class="className">
    
    <!-- 縮寫 -->
    <img :src="imgSrc" alt="" :class="className">
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    imgSrc: 'https://images.unsplash.com/photo-1479568933336-ea01829af8de?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9926ef56492b20aea8508ed32ec6030&auto=format&fit=crop&w=2250&q=80',
    className: 'img-fluid'
  }
})
</script>