《Vue3实战》第四章条件语句、循环语句

蔚落 2023-09-26 20:47 141阅读 0赞

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

#### 目录 ####

*  前言
 *  准备组件
 *  1、条件语句
 *   *  1.1、v-if
     *  1.2、v-else
     *  1.3、v-else-if
     *  1.4、v-show
 *  2、循环语句
 *   *  2.1、遍历数组
     *  2.2、迭代对象
     *  2.3、显示过滤/排序后的结果
     *  2.4、v-for/v-if 联合使用

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

## 前言 ##

介绍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 ###

结果：  
![在这里插入图片描述][691eb586b6e245fdac436bebb00b686a.png]

### 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"
            }
        }
    }

结果：  
![在这里插入图片描述][137a596d9ea44eca80632a6a9159b4e9.png]

### 1.4、v-show ###

根据条件展示元素。

<h1 v-show="seen">
            显示或隐藏
    </h1>
    
    export default{
        
        name: 'SentenseTest',
        data(){
        
            return{
        
                seen : true
            }
        }
    }

结果：  
![在这里插入图片描述][bf50e73268cf45f0bf874c17eb6f1ad6.png]

## 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"}
                ]
            }
        }
    }

结果：  
![在这里插入图片描述][6731460ae364461db232b37da48f8410.png]

### 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"
                }
            }
        }
    }

结果：  
![在这里插入图片描述][c6ab2f1e8500456d9f744d84ba8ede57.png]

### 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);
            }
        }
    }

结果：  
![在这里插入图片描述][df7a9694c52c4073b9782de969c42197.png]  
![在这里插入图片描述][fd6a417cf0bc4fc787fcd8819148d344.png]

[node.js_npm]: https://blog.csdn.net/s445320/article/details/130107403
[Link 1]: https://blog.csdn.net/s445320/article/details/130108162
[Link 2]: https://blog.csdn.net/s445320/article/details/130198834
[Link 3]: https://blog.csdn.net/s445320/article/details/130200350
[Link 4]: https://blog.csdn.net/s445320/article/details/130200783
[Link 5]: https://blog.csdn.net/s445320/article/details/130200903
[Link 6]: https://blog.csdn.net/s445320/article/details/130213404
[Link 7]: https://blog.csdn.net/s445320/article/details/130213662
[Link 8]: https://blog.csdn.net/s445320/article/details/130110029
[Element plus]: https://blog.csdn.net/s445320/article/details/130197081
[691eb586b6e245fdac436bebb00b686a.png]: https://img-blog.csdnimg.cn/691eb586b6e245fdac436bebb00b686a.png
[137a596d9ea44eca80632a6a9159b4e9.png]: https://img-blog.csdnimg.cn/137a596d9ea44eca80632a6a9159b4e9.png
[bf50e73268cf45f0bf874c17eb6f1ad6.png]: https://img-blog.csdnimg.cn/bf50e73268cf45f0bf874c17eb6f1ad6.png
[6731460ae364461db232b37da48f8410.png]: https://img-blog.csdnimg.cn/6731460ae364461db232b37da48f8410.png
[c6ab2f1e8500456d9f744d84ba8ede57.png]: https://img-blog.csdnimg.cn/c6ab2f1e8500456d9f744d84ba8ede57.png
[df7a9694c52c4073b9782de969c42197.png]: https://img-blog.csdnimg.cn/df7a9694c52c4073b9782de969c42197.png
[fd6a417cf0bc4fc787fcd8819148d344.png]: https://img-blog.csdnimg.cn/fd6a417cf0bc4fc787fcd8819148d344.png