码迷,mamicode.com
首页 > 其他好文 > 详细

第一个vue程序

时间:2019-12-01 09:51:06      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:col   splay   show   ora   round   vue   https   text   一个   

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

 

第一个vue程序

标签:col   splay   show   ora   round   vue   https   text   一个   

原文地址:https://www.cnblogs.com/RoronoaZoro/p/11965113.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!