Vue分支循环结构~非常详细哦

最新推荐文章于 2023-11-15 13:23:35 发布

weixin_46370867

最新推荐文章于 2023-11-15 13:23:35 发布

阅读量181

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_46370867/article/details/113003537

版权

Vue 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

文章目录

- - 分支循环结构

分支循环结构

分支结构

v-if
v-else
v-else-if

v-show：v-show的原理:控制元素样式是否显示display : none

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分支结构</title>
</head>
<body>
    <div id="app">
        <div v-if='score>=90'>优秀</div>
        <div v-else-if='score<90&&score>=80'>良好</div>
        <div v-else-if='score<80&&score>=60'>一般</div>
        <div v-else>差</div>
        <div v-show='flag'>测试v-show</div>
        <button v-on:click='handle'>点击</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        /*
            v-show的原理:控制元素样式是否显示display : none
        */ 
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                score: 100,
                flag: false
                  
            },
            methods: {
                handle: function(){
                    // 取反
                    this.flag = !this.flag;
                }
            }
        })
    </script>
</body>
</html>

v-if与v-show的区别

v-if控制元素是否渲染到页面
v-show控制元素是否显示（已经渲染到了页面)

循环结构

v-for遍历数组

<li v-for=' item in list '>{{item} }</ li>

<li v-for='(item, index) in list'>{ {item} } + '---' +{ {index} }</li>

key的作用︰帮助Vue区分不同的元素，从而提高性能

<li : key='item.id' v-for=' (item,index) in list'>{{item} } + '---' { findex}}</li>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环结构</title>
</head>
<body>
    <div id="app">
        <h3>水果列表</h3>
        <ul>
            <!-- 
                item 循环变量
                in 关键字
                fruits 你要遍历的数据结构
             -->
            <li v-for='item in fruits'>{{item}}</li>
            <!-- index关键字 - 显示索引 -->
            <!-- <li v-for='(item,index) in fruits'>{{item + '----' + index}}</li> -->
            
            <li v-for='(item,index) in fruits'>{{item + '----' + index}}</li>


<!--             <li v-for='item in myFruites'>
                <span>{{item.ename}}</span>
                <span>----</span>
                <span>{{item.cname}}</span>
            </li> -->

            <!-- 使用key关键字: 与上面的结果是一样的，但是可以提高性能 -->
            <li :key='item.id' v-for='(item,index) in myFruites'>
                <span>{{item.ename}}</span>
                <span>----</span>
                <span>{{item.cname}}</span>
            </li>

        </ul>  
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                fruits: ['apple','orange','banana'],
                myFruites: [{
                    id:1,
                    ename: 'apple',
                    cname: '苹果'
                },
                {
                    id:2,
                    ename: 'banana',
                    cname: '香蕉'
                },
                {
                    id:3,
                    ename: 'orange',
                    cname: '橘子'
                }]
            }
        })
    </script>
</body>
</html>

v-for遍历对象

值键索引这个顺序是不能变的，变量名可以自定义

<div v-for=' ( value,key,index) in object'></ div>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环结构</title>
</head>
<body>
    <div id="app">
      <!-- 值 键 索引 这个顺序是不能变的，变量名可以自定义 -->
      <div v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 使用原生js遍历对象
        var obj = {
            uname: 'lisi',
            age: 12,
            gender: 'male'
        }

        for (var key in obj) {
            console.log(key, obj[key])
        }

        // 
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                obj : {
                uname: 'lisi',
                age: 12,
                gender: 'male'
        }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-for遍历对象

<div v-if='value==12' v-for='(value,key,index) in object'></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环结构</title>
</head>
<body>
    <div id="app">
      <!-- 值 键 索引 这个顺序是不能变的，变量名可以自定义 -->
      <!-- <div v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> -->
      <!-- 只有符合if条件的数据才能被遍历 -->
      <div v-if='v===13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 使用原生js遍历对象
        var obj = {
            uname: 'lisi',
            age: 12,
            gender: 'male'
        }

        for (var key in obj) {
            console.log(key, obj[key])
        }

        // 
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                obj : {
                uname: 'lisi',
                age: 13,
                gender: 'male'
        }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

weixin_46370867

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue分支循环结构~非常详细哦

文章目录分支循环结构分支结构v-if与v-show的区别循环结构分支循环结构分支结构v-ifv-elsev-else-ifv-show：v-show的原理:控制元素样式是否显示display : none示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=
复制链接

扫一扫

专栏目录