一，指令 v-if
这篇文章我们来讲讲我们的条件语句v-if，在我们的Vue官网我们可以在条件渲染找到v-if相关的解释等其他条件语句，那我们来回到我们的代码，我还是初始了代码，只是给了结构，在html里面给了两个button,因为是点击事件所以我们绑定了click，绑定的属性是error=!error和success=!success,我们可以用我们的button改变我们的真和假
<body>
<div id="vue-app">
<button v-on:click="error = !error"> 显示错误 </button>
<button v-on:click="success = !success">显示成功 </button>
</div>
</body>
new Vue({
el:"#vue-app",
data:{
error:false,
success:false
},
methods:{
},
computed:{
}
})
框架结构我们都做好了，那我们现在就要运用我们的条件语句v-if，我们知道，在if条件语句中只有真和假，所以我们在真的时候显示一个内容假的时候显示另一个内容，那我们就给一个p标签网络连接错误：404，那么在什么时候显示呢，要在他为真的时候显示，那我们给他一个v-if="error"，我们知道在默认条件下他是false，既然是false那我们在页面中是看不到的，当我们点击显示错误的时候我们就可以看到网络连接错误：404
<body>
<div id="vue-app">
<button v-on:click="error = !error"> 显示错误 </button>
<button v-on:click="success = !success">显示成功 </button>
<p v-if="error">网络连接错误：404</p>
</div>
</body>
我们在控制台可以看到，当我们在为真的时候是可以看到我们的p标签，那我们为假的时候，他在Dom里面不存在了，他是一个不存在的标签，他是不占位的，当我们使用v-if，为真的时候标签存在，为假的时候标签就不存在，如果我们想让我们的成功，也显示出来的话，一样给个p标签，仍然使用v-if
<body>
<div id="vue-app">
<button v-on:click="error = !error"> 显示错误 </button>
<button v-on:click="success = !success">显示成功 </button>
<p v-if="error">网络连接错误：404</p>
<p v-if="success">网络连接成功：200</p>
</div>
</body>
同样的当我们点击显示成功的时候我们会看到p标签，那么这样的话，我们也同样点击显示错误我们也可以看到第一个p标签，这样的话肯定不太现实，那样怎么做才能把它去掉呢，可以给他一个v-else-if，如果error为真就显示出来，否则不显示，如果success为真那就显示出来，否则两个都不显示出来，这两个只能显示一个
<body>
<div id="vue-app">
<button v-on:click="error = !error"> 显示错误 </button>
<button v-on:click="success = !success">显示成功 </button>
<p v-if="error">网络连接错误：404</p>
<p v-else-if="success">网络连接成功：200</p>
</div>
</body>
我们在点击error我们会看到404，我们在点击success并没有显示出来，反过来是同样的，所以他们两个只能显示一个，在我们v-if中，我们还得提到另一个v-show，让我们看看v-show和v-if他们两者有什么不同之处
<body>
<div id="vue-app">
<button v-on:click="error = !error"> 显示错误 </button>
<button v-on:click="success = !success">显示成功 </button>
<p v-show="error">网络连接错误：404</p>
<p v-show="success">网络连接成功：200</p>
</div>
</body>
我们在DOM里面可以清楚的看到我们的p标签是占位的，不管是为真还是为假他都占一个位置，只不过为假的时候他style里面显示的是display：none的字样
二，循环v-for
在Vue官网我们在指令导航栏里面可以看到很多指令，有我们之前讲过的，也有没讲过的，那么这里我们来一起看看看v-for，既然我们要使用我们的for循环，我们就要遍历一个数组，我们在data里面写一个数组charac:["xiaohong","xiaoming","zhanghua",]我们在给一个数组，数组里面是对象users:[{name:"kangkang",age:18},{name:"jie",age:17},{name:"lihua",age:19}],那么在html里面怎么才能拿到这些数组里面的内容，我们最简单的方法就是下标，{{charac[0]}}{{charac[1]}}{{charac[2]}},对于数组来讲我们肯定不会这么拿，这么拿的话就太麻烦了，肯定要使用我们的数组遍历，用到数组遍历，我们就要用到<ul><li></li></ul>,在我们的li里面我们v-for="charas in chara",而这个charas是数组里面每一个元素给他的值，当然这个charas你可以给他任何名字，这都是无所谓的，我们这么写是为了方便，既然我们已经拿到了charas我们就可以在li里面就可以直接使用{{charas}}
<body>
<div id="vue-app">
<h1></h1>
<ul>
<li v-for="charas in chara">
{{charas}}
</li>
</ul>
</div>
</body>
new Vue({
el:"#vue-app",
data:{
chara:["zuozhu","mingren","xiaoying"],
users:[
{name:"boobo",age:19},
{name:"yumi",age:19},
{name:"odd",age:18}
]
},
methods:{
}
})
我们在网页刷新之后就可以看到我们的列表排序好的chara，然后我们在把我们第二个对象遍历出来，同样的我们和上面一样在遍历一遍
<body>
<div id="vue-app">
<h1></h1>
<ul>
<li v-for="charas in chara">
{{charas}}
</li>
</ul>
<ul>
<li v-for="user in users">
{{user}}
</li>
</ul>
</div>
</body>
这样我们就把我们的对象也遍历出来了，但是我们会发现，他是原模原样的吧对象遍历出来了，这并不是我们想要的结果，那么我们就要用到 "."，如果我们想要得到name和age里面的值我们就要.name和.age,{{user.name}}-{{user.age}}
<body>
<div id="vue-app">
<h1></h1>
<ul>
<li v-for="charas in chara">
{{charas}}
</li>
</ul>
<ul>
<li v-for="user in users">
{{user.name}} - {{user.age}}
</li>
</ul>
</div>
</body>
这样我们就对应的把我们的name和age遍历出来了，既然我们遍历出来数组，那我们就要有对应的下标，那我们就把user括号括起来，这是我们的第一个参数拿到的每一个元素，第二个参数是我们的下标，所以我们用index这样的话我们就可以用我们的index,{{index}} {{user.name}}-{{user.age}}
<body>
<div id="vue-app">
<h1></h1>
<ul>
<li v-for="charas in chara">
{{charas}}
</li>
</ul>
<ul>
<li v-for="(user,index) in users">
{{index}} . {{user.name}} - {{user.age}}
</li>
</ul>
</div>
</body>
这样我们就是有下标的序列，当然他默认的第一个数字是0，如果我们想要用1开头的话，我们只需要在index后面加1就行了{{index+1}}。
这是我和大家一起分享我自己所学到的一些Vue.js的基础知识，希望看到这篇文章的各位前辈多多关照，小生有哪些错误的地方希望能够指出来，也希望其他和我一样的小白能够有所帮助。
网友评论