VUE 模板語法

時間 2019-11-11

標籤 vue 模板語法简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue - 模板語法 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body  >
    <div id="app">
            <span>Message: {{ msg + "hello"}}</span><!-- 只支持一句話表達式，單個表達式 若是是變量的話只容許vm對象裏面的變量 例如外部全局變量會出現undefined -->
            <span v-once>這個將不會改變: {{ msg }}</span>
            <input v-model="msg">
            <p>Using mustaches: {{ rawHtml }}</p>
            <p>Using v-html directive: <span v-html="rawHtml"></span></p>
            <input v-bind:value="value">
            <!-- <input id={{id}}> 錯誤的 mustache 語法不能使用再標籤的屬性上，須要經過bind來實現 -->
            <p v-if="seen">如今你看到我了</p>
            <a v-bind:href="url">v-bind 綁定屬性</a>
            <br>
            <a v-bind:[attr]="dynamic">動態屬性</a>
    </div>
    <!-- 
        v-bind:href :href
        v-on:click  @click
     -->
</body>
</html>
<script>   
    vm = new Vue({
        el : '#app',
        data : {
            value : '你好漂亮',
            msg : '1',
            rawHtml : '<h1>Hi{{msg}}</h1>',
            seen : 'true',
            url : 'https://www.baidu.com',
            attr : 'href', /* 文檔中的attributeName 應該被保留了 請不要用這個字符串做爲變量key */
            dynamic : '這是一個動態屬性'
        },
    });
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。