本文目录

一、Vue模板语法
二、Tab选项卡案例

一、Vue模板语法

1.分支循环结构

1.1 v-if分支结构

v-if
v-else-if
v-else

效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
    
    
            padding: 20px 20px;
            border: 1px solid #ccc;
        }
        div {
    
    
            text-align: center;
        }
        .add, .reduce {
    
    
            margin-top: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>你的成绩单</div>
        <hr>
        <div v-text="'当前分数：' + score"></div>
        <div v-if="score >= 90" v-text="'优秀'"></div>
        <div v-else-if="score < 90 && score >= 70" v-text="'良好'"></div>
        <div v-else-if="score < 70 && score >= 60" v-text="'及格'"></div>
        <div v-else>不及格</div>
        <div class="add">
            不满意分数
            <button @click="score += 10">自己加分</button>
        </div>
        <div class="reduce">
            不能骄傲
            <button @click="score -= 10">自己减分</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        const vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                score: 60
            }
        })
    </script>
</body>
</html>

代码解读：

通过v-if v-else-if v-else里面的表达式进行判断，如果为true就显示当前标签，如果为false就不现实当前标签。
注意：这边通过v-if v-else-if v-else 是不会生成标签，如果涉及到频繁的操作，最好不要使用v-if，因为v-if会增加dom的开销

1.2 v-show的使用

效果展示：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
    
    
            padding: 20px 20px;
            border: 1px solid #ccc;
        }
        div {
    
    
            text-align: center;
        }
        .add, .reduce {
    
    
            margin-top: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-show="flag" v-text="'显示隐藏'"></div>
        <button @click="flag = !flag">{
    
    {
    
     flag ? '隐藏' : '显示' }}</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        const vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                flag: true
            }
        })
    </script>
</body>
</html>

代码解读：

通过v-show 的指令true元素显示，false元素隐藏。
并且这边在button的插值表达式中使用了三步运算符。flag为true则button文本为隐藏，flag为false则button文本为显示。
通过v-show的指令只是将元素display: none，元素还存在：

1.3 v-if与v-show区别

v-if控制元素是否存在页面中；
v-show只是控制元素的样式隐藏与否；

2.循环结构

2.1 v-for数组循环结构

v-for在实际的开发过程中用的比较频繁，它主要是循环数组列表，然后可以将列表中的数据展示在页面中。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in augend" :key="index">{
    
    {
    
    item}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        const vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                augend: ['Vue', 'Node.js', 'React']
            }
        })
    </script>
</body>
</html>

效果：
在这里插入图片描述
代码解读：

我们用v-for="(item, index) in augend" 去循环augend这个数组，那么在v-for指令中item就是数组中的每一项，index为数组每一项的索引值。
这里我们用了插值表达式将每一项都渲染到页面上。
:key是Vue这边让我们加上的，如果不加上，Vue判断循环出来的元素不知道哪个是哪个，所以最好加上。

2.2 v-for对象循环结构

v-for除了可以循环渲染数组外，还可循环对象，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(value, key, index) in augend" :key="index">{
    
    {
    
    'value: ' + value}} --- {
    
    {
    
    'key: ' + key}} --- {
    
    {
    
    'index: ' + index}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        const vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                augend: {
    
    
                    frontEnd: "Vue",
                    backEnd: "Node"
                }
            }
        })
    </script>
</body>
</html>

效果：
在这里插入图片描述
代码解读：

v-for循环对象时，第一个参数是属性值，第二个参数是属性名，第三个参数是索引值。

3.v-if 和v-for的结合使用

将上面循环对象的代码li标签加上v-if指令，如下:

<li v-if="0 == index" v-for="(value, key, index) in augend" :key="index">{
    
    {
    
    'value: ' + value}} --- {
    
    {
    
    'key: ' + key}} --- {
    
    {
    
    'index: ' + index}}</li>

可以看到页面只会渲染第一项：
在这里插入图片描述

二、Tab选项卡案例

1.效果预览

在这里插入图片描述

2.代码实现与解读

2.1代码实现

如上选项卡，运用Vue的模板语法实现，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab-container {
    
    
            width: 600px;
            margin: 50px auto 0;
            min-height: 200px;
            /* border: 1px solid #333; */
        }
        .tab-header {
    
    
            display: flex;
            /* height: 50px; */
            /* border: 1px solid #333; */
        }
        .tab-main-items {
    
    
            display: none;
            height: 150px;
            border: 1px solid #333;
            padding: 10px;
        }
        .tab-item {
    
    
            width: 10px;
            flex-grow: 1;
            border: 1px solid #333;
            text-align: center;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
        }
        .active {
    
    
            display: block;
        }
        .fzActive {
    
    
            color: red;
            font-size: 18px;
        }
        h3 {
    
    
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="tab-container">
            <h3>员工信息资料卡</h3>
            <div class="tab-header">
                <div 
                    :key="index" 
                    class="tab-item" 
                    v-text="value.name"
                    @click="clickHandler(index)"
                    v-for="(value, index) in array"
                    :class="{fzActive: index == flag}">
                </div>
            </div>
            <div 
                :key="index" 
                v-text="value.des"
                class="tab-main-items" 
                v-for="(value, index) in array"
                :class="{active: index == flag}">
            </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        const vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                flag: 0,
                array: [
                    {
    
    
                        name: '小明',
                        des: '大家好，我是小明。。。'
                    },
                    {
    
    
                        name: '小红',
                        des: '大家好，我是小红。。。'
                    },
                    {
    
    
                        name: '小王',
                        des: '大家好，我是小王。。。'
                    }
                ]
            },
            methods: {
    
    
                clickHandler (index) {
    
    
                    this.flag = index
                }
            }
        })
    </script>
</body>
</html>

2.2代码解读

首先导航栏和主体都是去循环了array这个数组，导航栏文本框渲染了每一项的name。以及每个导航栏都绑定了一个点击事件，每次点击都把当前的索引值给传入。并且动态绑定了fzActive这个类，当当前的索引值与data中定义的flag相等的话就会有这个样式，所以我们默认给flag设置为0，所以一开始第一项就会有这个样式，当点击后触发clickHandler这个函数，函数中将flag重新复制最新传过来的索引值，所以点击哪一项，那一项就会有这个选中的样式。
主体中也是去循环了这个数组，并且在文本框中渲染每一项的des，这边的样式也是动态绑定，也是跟这个flag关联，根据数组的索引index是否等于flag去判定当前是否有active这个选中的样式。

Vue的基础入门之第三篇