前端基础-vue（条件循环）

最新推荐文章于 2024-01-30 15:49:38 发布

SmallRed-zhb

最新推荐文章于 2024-01-30 15:49:38 发布

阅读量508

点赞数

CC 4.0 BY-SA版权

分类专栏： IT 前端文章标签： vue vue条件循环 vue if vue for vue前端框架

本文链接：https://blog.youkuaiyun.com/qq_41442781/article/details/89677429

IT 同时被 2 个专栏收录

39 篇文章

订阅专栏

前端

35 篇文章

订阅专栏

本文详细介绍了Vue.js中条件渲染和列表渲染的使用方法，包括v-if、v-else-if、v-else、v-show及v-for指令的运用。通过实例展示了如何根据条件展示或隐藏元素，以及如何遍历数组和对象来动态生成列表。

HTML部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件循环语句</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div class="tiaojian">
<p v-if="shu>10">还有{{shu}}个资源</p>
<p v-else-if="shu<=10&&shu>=1">快没资源了</p>
<p v-else>已经没资源了</p>
<template v-if="show">
<p>我是第一个p</p>
<p>我是第二个p</p>
</template>
<p v-show="true">我用的是v-show属性，v-show没有把dom节点去掉，而是隐藏起来，display="none"</p>
</div>

<div class="xunhuan">

<ul>
<li v-for="xianshi in liebiao">{{xianshi.name}}|{{xianshi.age}}岁</li>
<li v-for="(xianshi,i) in liebiao">{{i}}</li>
</ul>

<p v-for="(value,prop,index) in duixiang">{{value}}|{{prop}}|{{index}} </p>

<button @click="add">增加一个dom节点</button>

</div>
<script src="../js/vue-5.js"></script>
</body>
</html>

js部分

new Vue({
el:".tiaojian",
   data:{
       shu:20,
       show:true,
   }
})

new Vue({
el:".xunhuan",
   data:{
       liebiao:[
       {
           name:"小红1号",
           age:22,
       },
           {
           name:"小红2号",
           age:23,
       },
           {
           name:"小红3号",
           age:24,
       },
       ],
       duixiang:{
           name:"zhb",
           age:22,
           sex:"男",
       }
   },
   methods:{
       add:function(){
           this.liebiao.push({//vue重写了push方法，可以直接push数组元素
               name:"小红x号",
               age:100,
           })

       },
   }
})

小测试：

html部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input @input="changetype"/>
<p v-if="password.length>8">你的密码大于8位啦</p>
<p v-else-if="password.length <= 8 && password.length > 0">请输入一个更长的密码</p>
<p v-else>请输入你的密码</p>
<ol>
<li v-for="item in cate" :key="item.name">
{{ item.name }}
<ul>
<li v-for="sub in item.sub" :key="sub">{{ sub }}</li>
</ul>
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
password: '',
cate: [{
name: 'js', sub: ['vue','jq','react']
},{
name: 'Databases', sub: ['Mysql','Oracle','MongoDB']
},{
name: 'os', sub: ['macOS','Windows','Linux']
}]
},
           methods:{
               changetype:function(e){
                   this.password=e.target.value;
                   }
           }
})
</script>
</body>
</html>