iT邦幫忙

2021 iThome 鐵人賽

DAY 14
1
Modern Web

菜鳥學前端,一起vue起來 !系列 第 14

Day 14. 模板語法Template Syntax – 插值 Attribute、JavaScript 表達式

讓我們接續昨天的模板語法介紹吧,昨天講了v-once跟v-html,今天來說說屬性跟JavaScript 表達式!

Attribute

Mustache語法不能作用在HTML Attribute上。

v-bind

在上一篇中我們使用v-html來保留HTML要呈現的樣子,但因為用變數將 HTML 寫入網頁可能會產生 XSS 攻擊的風險,所以只能在信任的資料上運用 v-html,為了減少v-html 的使用,避免在用戶可以操作與提交資訊的網頁中被 XSS 攻擊,我們可以使用 v-bind來達成我們需要的效果。
v-bind 的效果是提供 HTML 屬性,讓我們可以依據條件與情形動態操作該 HTML 標籤下的屬性細節。如:div區塊內的文字樣式style,img內的圖片連結src等等。
v-bind:屬性=”變量值”

來個小範例٩(●ᴗ●)۶
我們把v-bind屬性綁定class,並且給它變量color,在vm裡面的data我們將color的值定為orange。

    <div id="app">
        <p v-bind:class="color">顏色變變變</p>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                color:'orange'
            }
        });
    </script>

執行後會發現,字還是一樣是黑色的,但打開控制台看會發現class有對應到orange (⊙_⊙)
https://ithelp.ithome.com.tw/upload/images/20210923/20131400C9yPnpiU0Q.png

接著我們來聲明orange的樣式,讓他會對應到橘色吧˙˚ʚ(´◡`)ɞ˚˙

    <div id="app">
        <p v-bind:class="color">顏色變變變</p>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                color:'orange'
            }
        });
    </script>

    <style>
        .orange{color: orange;}
    </style>

會看到字就變成橘色了!
https://ithelp.ithome.com.tw/upload/images/20210923/20131400XVvOkIgbG1.png

我們也可以改變字的大小,加上font-size

    <div id="app">
        <p v-bind:class="color">顏色大小都變變變</p>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                color:'blue'
            }
        });
    </script>

    <style>
        .orange{color: orange;}
        .blue{color: blue;font-size: 100px;}
    </style>

https://ithelp.ithome.com.tw/upload/images/20210923/20131400WQnTdeBCjS.png

JavaScript表達式

到目前為止,我們的模板中都只有綁定簡單的property鍵值,但實際上,在template與法理面是可以使用JavaScript表達式的。

  • 數字運算(相加)
<div id="app">
	   <p >{{number+1}}</p>
	
</div>
	
<script>
	   var vm = new Vue({
	       el: '#app',
	       data: {
	           number:14
	       }
	   });
</script>

我們給了一個number=14所以number+1出來就會是15
https://ithelp.ithome.com.tw/upload/images/20210923/201314006Vtd0r8psd.png

  • 三元運算式
    {{ ok ? 'YES' : 'NO' }} ,ok的部分是一個變量或條件運算的結果,如果答案是true會執行問號後的答案,答案為false會執行冒號後的答案。
<div id="app">
	   <p >{{ ok ? 'YES' : 'NO' }}</p>
</div>
	
<script>
	   var vm = new Vue({
	       el: '#app',
	       data: {
	           ok:false
	       }
	   });
</script>

https://ithelp.ithome.com.tw/upload/images/20210923/201314001doIuQiFxv.png

  • 文字反轉
    {{ message.split('').reverse().join('') }},這個函式會先將message的字母去作拆分,並把它倒轉,最後再組合起來,反序排列後輸出。
<div id="app">
    <p >{{ message.split('').reverse().join('') }}</p>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message:"Hello"
        }
    });
</script>

https://ithelp.ithome.com.tw/upload/images/20210923/20131400Ux37K6Pomh.png

可以在模板語法中執行的只能是單行的表達式,所以以下的例子都沒辦法執行。

{{ var a = 1 }}
//這是語句,不是表達式
{{ if (ok) { return message } }}
//用三元運算可以,但if…else…不能直接使用

模板的表達式只接受白名單的全局變量(global變數)
https://ithelp.ithome.com.tw/upload/images/20210923/20131400d3SAhEEAdA.png


上一篇
Day 13. 模板語法Template Syntax – 插值 v-once、v-html
下一篇
Day 15. 模板語法Template Syntax – 指令
系列文
菜鳥學前端,一起vue起來 !30

尚未有邦友留言

立即登入留言