本文介绍了Vue.js的基本概念，包括其MVVM架构、数据绑定机制，以及如何使用v-if、v-else和v-else-if进行条件渲染。实例展示了如何在HTML中应用这些指令来控制元素的显示与隐藏。
1.Vue介绍
Vue.js 是用于构建交互式的 Web 界面的库。
Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。
2.Vue使用
<body>
<!-- 容器 ，app容器名称-->
<!-- 注：容器名称尽量使用id绑定唯一值 -->
<div id="app">
<!-- {{}}插值语法 -->
{{ message }}---
<h1>
{{names}}
</h1>
</div>
<div id="abc" class="box1">
{{ message }}
</div>
</body>
<body>
<!-- 容器 ，app容器名称-->
<!-- 注：容器名称尽量使用id绑定唯一值 -->
<div id="app">
<!-- {{}}插值语法 -->
{{ message }}---
<h1>
{{names}}
</h1>
</div>
<div id="abc" class="box1">
{{ message }}
</div>
</body>
3.Vue条件语句
3.1 v-if
条件判断使用 v-if 指令：
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
3.2 v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块：
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
3.3 v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
