Vue条件与循环

痛定思痛。 2021-10-19 23:50 521阅读 0赞

Vue条件与循环

在Vue中控制切换一个元素是否显示也相当简单：

  1. <div id="app-3">
  2.   <p v-if="seen">现在你看到我了</p>
  3. </div>
  5. var app3 = new Vue({ 
  6.   el: '#app-3',
  7.   data: { 
  8.     seen: true
  9.   }
  10. })

继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

  这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：

  1. <div id="app-4">
  2.   <ol>
  3.     <li v-for="todo in todos">
  4.       {
  5.    { todo.text }}
  6.     </li>
  7.   </ol>
  8. </div>
  10. var app4 = new Vue({ 
  11.   el: '#app-4',
  12.   data: { 
  13.     todos: [
  14.       {  text: '学习 js' },
  15.       {  text: '学习 Vue' },
  16.       {  text: '完成项目' }
  17.     ]
  18.   }
  19. })

在控制台里，输入 app4.todos.push({ text: ‘新项目’ })，你会发现列表最后添加了一个新项目。

发表评论

表情：
评论列表 （有 0 条评论，521人围观）

还没有评论，来说两句吧...

相关阅读