Vue-02 Mustache語法 v-html v-text v-pre

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js"></script>
    <title>Mustache</title>
</head>
<body>
    <div id="app">
        <p><center>[wp_ad_camp_1]</center></p><p><label>變數：</label>{<!-- -->{name}}</p>
        <P><label>變數：</label>{<!-- -->{num}}</P>
        <P><label>運算式：</label>{<!-- -->{5+10}}</P>
        <P><label>三元運算：</label>{<!-- -->{1==10?20:100}}</P>
        <P><label>匿名函式：</label>{<!-- -->{(()=>10000+10000)()}}</P>
        <P v-html="myHtml"><label>html：</label></P>
        <P v-text="myText"><label>v-text：</label></P>
        <P v-pre><label>pre：</label>{<!-- -->{10+45+15}}</P>
    </div>
    <script type="text/javascript">
        let vm=new Vue({
            el:"#app",
            data:{
                name:"my world",
                num:18,
                myHtml:"<h1>good world</h1>",
                myText:"hello",
            }
        })
    </script>
</body>
</html>

  1. {{}}一切取值的運算式
  2. v-text 不太方便
  3. v-html 動態html標籤
  4. v-pre 原樣顯示