条件与循环

条件与循环

条件与循环

条件 v-if

控制切换一个元素是否显示也相当简单:

指令: v-if  

意思: 根据你传入的属性,进行if判断,显示隐藏

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

控制台动态改变属性:

app3.seen = false

发现 之前显示的消息消失了

v-for 渲染一个项目列表

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

显示效果:

条件与循环

控制台动态改变属性:

app4.todos.push({ text: '新项目' })

你会发现列表最后添加了一个新项目。

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
讨论数量: 0
发起讨论 只看当前版本


暂无话题~