vue.js 条件和循环

同样，切换元素的存在也很容易：

<div id="conditional-rendering">
<span v-if="seen">Now you see me</span>
</div>
const ConditionalRendering = {
data() {
return {
seen: true
}
}
}

Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
此示例说明了我们不仅可以将数据绑定到文本和属性，还可以绑定到DOM的结构。此外，Vue还提供了功能强大的过渡效果系统，当Vue插入/更新/删除元素时，该系统可以自动应用过渡效果。

您可以在下面的沙箱中seen从更改true为false，以检查效果：

还有很多其他指令，每个指令都有其自己的特殊功能。例如，该v-for指令可用于使用数组中的数据显示项目列表：

<div id="list-rendering">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
const ListRendering = {
data() {
return {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
}
}

Vue.createApp(ListRendering).mount('#list-rendering')

 

免费源码下载地址：http://github.crmeb.net/u/defu