第一個vue程序

時間 2019-12-01

標籤第一個 vue 程序简体版

原文原文鏈接

第一個vue程序

<body>
    <div class="app">
        {{message}}--{{message+','+message}}
        <div :id='message' v-if="showMessage">{{title}}</div>
        <div v-else style="text-decoration: line-through;">{{title}}--{{title}}</div>
        <div :id='message' v-show="showMessage">{{title}}</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'.app',
            data:{
                message:'hello world',
                showMessage:false,
                title:"是否刪除"
            }
        })
    </script>
</body>

裏面的el能夠是id屬性，也能夠是class屬性，如id="app",則el:'#app',若是class="app",則el:'.app'
指令v-if和v-show:v-if判斷爲false，則不加入到頁面dom節點中，而v-show則只是設置該div或其餘標籤的display:none

相關標籤/搜索