第一个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