《Vue3实战》篇章整体栏目
—————————————————————————————
【第一章】node.js/npm安装、配置
【第二章】创建项目和目录结构
【第三章】基础语法
【第四章】条件语句、循环语句
【第五章】计算、监听属性
【第六章】样式绑定和事件处理
【第七章】表单
【第八章】自定义指令
【第九章】路由
【第十章】Element plus指南
【第十一章】Vue3实战之打造新闻系统前端模板
—————————————————————————————

—————————————————————————————

前言

介绍Vue3的条件语句、循环语句

准备组件

components下新增SentenseTest.vue
App.vue引进以上的主键

import SentenseTest from './components/SentenseTest.vue'
<SentenseTest/>
export default {
  name: 'App',
  components: {
    HelloWorld,
    SentenseTest
  },
  mounted(){
    this.$refs.hello_world.changeHello();
  }  
}

1、条件语句

1.1、v-if

<div v-if="seen">
    v-if 测试
</div>

export default{
    name: 'SentenseTest',
    data(){
        return{
            seen : true
        }
    }
}

1.2、v-else

<div v-if="seen">
    v-if 测试
</div>
<div v-else>
    v-else 测试
</div>

1.3、v-else-if

<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>
    其他等级
</div>
export default{
    name: 'SentenseTest',
    data(){
        return{
            type : "A"
        }
    }
}

1.4、v-show

根据条件展示元素。

<h1 v-show="seen">
        显示或隐藏
</h1>

export default{
    name: 'SentenseTest',
    data(){
        return{
            seen : true
        }
    }
}

2、循环语句

循环使用 v-for 指令。

2.1、遍历数组

<table border="1">
   <caption><b>名单</b></caption>
    <th>序号</th><th>姓名</th><th>性别</th>
    <tr v-for="(userInfo,index) in userInfos" :key="index">
        <td>{{index + 1}}</td><td>{{userInfo.name}}</td><td>{{userInfo.gender}}</td>
    </tr>
</table>

export default{
    name: 'SentenseTest',
    data(){
        return{
            userInfos : [
                {"name":"tiger","gender":"male"},
                {"name":"cat","gender":"male"},
                {"name":"mouse","gender":"female"},
                {"name":"lion","gender":"female"}
            ]
        }
    }
}

2.2、迭代对象

<ol>
   <li v-for="(value,key,index) in userInfo" :key="index">
    {{key}} | {{value}} | {{index}}
    </li>
</ol>

export default{
    name: 'SentenseTest',
    data(){
        return{
            userInfo : {"id":23423,"orderNo":"sn001","amount":88.2,"createDate":"2023-02-20"
            }
        }
    }
}

2.3、显示过滤/排序后的结果

<ol>
        <li v-for="n in eventNumbers" :key="n">
        {{n}} 
        </li>
    </ol>

export default{
    name: 'SentenseTest',
    data(){
        return{
            numbers:[5,3,2,6,90]
        }
    },
    computed:{
        eventNumbers(){
            return this.numbers.filter(number => number % 2 === 0)
        }
    }
}

2.4、v-for/v-if 联合使用

<select @change="changeVal($event)" v-model="selectOption">
    <template v-for="(orderStatus,index) in orderStatuses" :key="orderStatus.code" >
        <option v-if="index == 1" :value="orderStatus.code" selected>{{orderStatus.name}}</option>
        <option v-else :value="orderStatus.code" >{{orderStatus.name}}</option>
    </template>
</select>     
<div>{{selectOption}}</div>  

export default{
    name: 'SentenseTest',
    data(){
        return{
            selectOption:1,
            orderStatuses:[
                {"code":1,"name":"待支付"},
                {"code":2,"name":"已支付"},
                {"code":3,"name":"已取消"},
                {"code":4,"name":"已完成"}
            ]
        }
    },
    methods:{
        changeVal:function(event){
            this.selectOption = event.target.value;
            alert(this.selectOption);
        }
    }
}