JQ如何转Vue.js条件与循环
条件与循环#
条件 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
粤公网安备 44030502004330号