概述v-showv-show的使用和v-if类似，也用于决定一个元素是否被渲染v-show和v-if的区别：v-if和v-show都可以用来决定一个元素是否渲染v-if为flase时，压根不会有对应的元素在DOM中v-show对应为flase时，仅仅是将元素的display属性设置为none而已开发过程中，我们应该如何选择呢？当我们需要在显示与隐藏之间频繁切换时，使用v-show...
概述
每天都努力一点点，希望不要辜负自己!
v-show
v-show的使用和v-if类似，也用于决定一个元素是否被渲染
v-show和v-if的区别：
- v-if和v-show都可以用来决定一个元素是否渲染
- v-if为flase时，压根不会有对应的元素在DOM中
- v-show对应为flase时，仅仅是将元素的display属性设置为none而已
开发过程中，我们应该如何选择呢？ - 当我们需要在显示与隐藏之间频繁切换时，使用v-show
- 当只有一次切换时，通过使用v-if
<div id="app">
<!-- v-if:当我们条件为flase时，我们的对应的元素是包含v-if指令的元素，根本就不会存在于dom中-->
<h2 v-if="isShow" id="123">{
{
message}}</h2>
<!-- v-show:当我们条件为flase时，只是给我们的元素添加了一个行内样式：display:none-->
<h2 v-show="isShow" id="456">{
{
message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀',
isShow: true
}
})
</script>
v-for遍历数组和对象
当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
-
v-for类似于JavaScript中的for循环
-
格式如下：
item in items的形式
我们来看一个简单的案列：
如果在遍历的过程中不需要使用索引值 -
v-for =“movies in movies”
-
依次从movies中取出movie,并且在元素的内容中，我们可以使用mustache语法，来使用movie
如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？ -
语法格式：
v-for （item ，index）in items -
其中的index就代表了取出的item在原数组的索引值
遍历数组
<body>
<div id="app">
<!-- 在遍历过程中没有使用索引值-->
<ul>
<li v-for="item in names">{
{
item}}</li>
</ul>
<!--在遍历的过程中获取索引值--
最低0.47元/天 解锁文章
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
