Lemon

条件渲染分组，v-if和v-for一起使用

对上一篇中v-if系列的一个补充拓展
1.分组渲染

1
2
3
4
5
6

<template v-if="ok">
<!--最后的渲染效果不会渲染temlate标签，该标签方便我们进行分组渲染，而不会然css样式出现无效-->
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

vue使用是MVVM模式

基本指令 （前提是已安装vue或以将vue.js文件引入，详细操作见官方文档:(https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5)）

• 插值(在文本域插值只能用v-model)

  1 2 3 4 5

  <div class="app"> <!-- （可先跳过这段文字）这里只是给vue提供的挂载点，也就是vue.js将会通过el: '.app' （如果是id，就是el :'#类名'） --> <p> {{message}}{{tip}}</p> <!-- 通过双花括号将数据带入，也可以带入一个单表达式 （这是一种模板语法）--> </div>