vue 第三天指令之条件循环v-if和v-for

最新推荐文章于 2022-11-19 12:58:40 发布

lilianggui

最新推荐文章于 2022-11-19 12:58:40 发布

阅读量489

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/lilianggui/article/details/103026952

版权

vuejs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

上一篇说到vue的指令，指令是vue比较基础但是非常重要的知识，上篇只提到了v-bind、v-text、v-html、v-on等，这篇讨论一下编程语言不可绕开的条件和循环结构。

1、v-if的作用是控制元素的显示与隐藏，v-if后面的变量或表达式为真时，元素显示，否则隐藏。与其配合使用的指令还有v-elseif、v-else，和JavaScript的条件判断原理相同。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <label>请输入年龄：<input v-model="age"></label>
        <button v-on:click="nameShowFlag = !nameShowFlag">点击</button>
        <p v-if="nameShowFlag">名字：{{ name }}</p>
        <p v-else-if="age >= 18">你今年{{ age }}岁，你是个成年的猪</p>
        <p v-else>你今年{{ age }}岁，你个未成年的猪</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: function(){
                return {
                    name: '猪八戒',
                    nameShowFlag: true,
                    age: 12
                }
            }
        });
    </script>
</body>
</html>

2、和v-if类似的指令有v-show，两者的区别是v-if是通过移除dom和填充都没来实现dom的隐藏与显示的，v-show是通过样式的display属性来控制的。两者能够同时胜任元素的显示和隐藏工作，但是他们有一些使用上的讲究，v-if是惰性的，如果条件为假那么什么都不做，条件为真时才会创建元素；v-show是无论真假都要创建元素，然后判断条件的真假通过样式来控制，所以v-show有更高的初始渲染消耗。但是后续的显示隐藏切换，v-show只需通过样式即可实现控制，无需创建和销毁dom，所以对于频繁切换显示隐藏的功能，推荐使用v-show，因为v-if有更高的切换消耗。

3、v-for循环结构，当页面需要循环渲染相同的标签只是内容不同时，就可以使用v-for，通常用来渲染一个列表、下拉选项、菜单等

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h3>用户列表</h3>
        <ul>
            <li>姓名  年龄  住址</li>
            <li v-for="item in users">
                {{item.username}}   {{item.age}}   {{item.address}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: function(){
                return {
                    users: [
                        {username: '唐僧', age: 28, address: '大唐'},
                        {username: '孙悟空', age: 520, address: '花果山'},
                        {username: '猪八戒', age: 300, address: '高老庄'},
                        {username: '沙僧', age: 250, address: '流沙河'}
                    ]
                }
            }
        });
    </script>
</body>
</html>

lilianggui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 第三天指令之条件循环v-if和v-for

上一篇说到vue的指令，指令是vue比较基础但是非常重要的知识，上篇只提到了v-bind、v-text、v-html、v-on等，这篇讨论一下编程语言不可绕开的条件和循环结构。1、v-if的作用是控制元素的显示与隐藏，v-if后面的变量或表达式为真时，元素显示，否则隐藏。与其配合使用的指令还有v-elseif、v-else，和JavaScript的条件判断原理相同。<!DOCTYP...
复制链接

扫一扫