第一个vue程序
Posted roronoazoro
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第一个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
以上是关于第一个vue程序的主要内容，如果未能解决你的问题，请参考以下文章
使用vscode，新建.vue文件，tab自动生成vue代码模板