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