iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

新手初探 Vue系列 第 10

鐵人賽Day10 - 基礎語法整理

綜合了前面所講的,來稍微整理一下 Vue 的常用語法:
首先我們一樣先寫好 Vue 的相關資料,如下:

<script>
var app = new Vue({
    el: '#app',
    data: {
        text: '這是一段文字',
        rawHtml: `<span class="text-danger">紅色文字</span>`,
        number1: 100,
        number2: 300,
        htmlId: 'HTMLID',
        isDisabled: true
    }
})
</script>

接著來重新整理一下:

  1. HTML 內使用雙大括號呈現資料
<p>{{ text }}</p>
  1. HTML 內插入包含 HTML 標籤的字串
<p>{{ rawHtml }}</p>

會發現這時候會連 HTML 標籤一起當作字串輸出出來
這時候就要採用 v-html 指令

<p v-html="rawHtml"></p>

這時候就會是正常的了,而關於 v-html 的危險性可至 Vue 官方網站查看

  1. 單次綁定
    單次綁定的意思是指說,今天我的資料只做一次的輸出後便不再做雙向的綁定,這時候可以使用 v-once 指令
<div v-text="text" v-once></div>

這時候字串只會被輸出一次,就不再做雙向綁定了

  1. 其他的表達式
    除了第一種方法來呈現資料外,其實在雙大括號內也可以使用 JS 的語法來做呈現
    例如基本的字串相加:
<p>
{{ text + rawHtml }}
</p>

或者直接撰寫 JS:

<p>{{ text.split('').reverse().join('') }}</p>

這樣文字就會直接反轉

數字的計算:

<p>{{ number1 + number2 }}</p>

5.綁上 HTML 標籤 ID 屬性

<p :id="htmlId"></p>

上述是採用 v-bind 的縮寫


上一篇
鐵人賽Day09 - 表單與資料雙向綁定
下一篇
鐵人賽Day11 - 動態切換 class 和 style 多種方法
系列文
新手初探 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言