Vue语法：条件渲染和列表渲染

最新推荐文章于 2024-04-20 11:50:28 发布

yulu32

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量314

点赞数

分类专栏： Vue 文章标签： vue javascript html5

本文链接：https://blog.csdn.net/yulu32/article/details/104027628

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

条件渲染和列表渲染

1.指令v-if和v-show

只需要为元素挂上v-if指令即可，与之配套的还有v-else-if和v-else，不过它们只能与v-if配合使用；v-show也可用于实现条件渲染，只不过他只是简单的切换CSS属性：display。当条件为假时，元素的display属性将被赋值为none，反之，display属性将被回复原有值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令v-if和v-show</title>
</head>
<body>
<div id="app">
    <h1>---------------v-if----------------</h1>
    <h2 v-if="order === 0">v-if</h2>
    <h2 v-else-if="order === 1">v-else-if</h2>
    <h2 v-else>v-else</h2>
    <button @click="toggleTitle">切换标题</button>

    <h1>-----------v-show-------------</h1>
    <h2 v-show="visible">v-show,visible = true</h2>
    <h2 v-show="!visible">v-show,visible = false</h2>
    <h2 v-if="visible">v-if,visible = true</h2>
    <h2 v-else>v-if,visible = false</h2>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data(){
            return{
                order:0,
                visible:false
            }
        },
        methods:{
            toggleTitle(){
                this.order = ++ this.order % 3;
                console.log('order的值为：',this.order);
            }
        }
    });
</script>
</body>
</html>

v-if在切换中，当组件被销毁时，它将无法被任何方式获取，因为它已经不存在DOM中。
v-show有更高的初始渲染开销，而v-if具有更高的切换开销。
v-show不支持template元素

2.指令v-for

可以使用item initems 或者item of items的语法，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令v-if和v-show</title>
</head>
<body>
<div id="app">
    <div style="float: left;width: 160px;">
        <h2>用户列表</h2>
        <ul>
            <li v-for="(item,index) in users">{{index}}----------{{item.name}}</li>
        </ul>
    </div>
    <div style="margin-left: 170px;overflow: hidden">
        <h2>用户列表</h2>
        <ul>
            <li v-for="(item,uIndex) in users">{{uIndex}}----------{{item.name}}
                <ul>
                    <li v-for="(value,key) of item">{{key}}----{{value}}</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                users: [
                    {name: '张三', age: 24, city: '西安'},
                    {name: '李四', age: 24, city: '西安'},
                    {name: '王五', age: 24, city: '西安'},
                    {name: '赵六', age: 24, city: '西安'},
                    {name: '田七', age: 24, city: '西安'}
                ]
            }
        },
        methods: {
            toggleTitle() {
                this.order = ++this.order % 3;
                console.log('order的值为：', this.order);
            }
        }
    });
</script>
</body>
</html>

与数据响应有关的数组方法

名称	说明
push	将一个或者多个元素添加至数组末尾，并返回新数组的长度
pop	从数组中删除并返回最后一个元素
shift	从数组中删除并返回第一个个元素
unshift	将一个或多个元素添加至数组开头，并返回新数组的长度
splice	从数组中删除元素或向数组中添加元素
sort	对数组元素排序，默认按照Unicode编码排序，并返回排序后的数组
reverse	将数组中的元素位置颠倒，返回颠倒后的数组

下面简单例举了push()和reverse（）方法，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令v-if和v-show</title>
</head>
<body>
<div id="app">
    <h2>用户列表</h2>
    <button @click="createUser">创建用户</button>
    <button @click="reverse">倒序数组</button>
    <ul>
        <li v-for="(item,index) in users">用户{{index + 1}}
            <ul>
                <li v-for="(value,key) of item">
                    <strong style="display: inline-block;width: 60px;">{{key}}</strong>
                    <span>{{value}}</span>
                </li>
            </ul>
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                users: []
            }
        },
        methods: {
            random(factory,base) {  //生成随机数
                return Math.floor(Math.random() * (factory || 1) + (base || 0));
            },
            createUser(){
                //获取获取name大写首字母
                var fLetter = 'BHDFKLJL'[this.random(7.999)];
                //随机截取name字符串
                var nameStr = 'abcdefghijklmnopqrstuvwxyz';
                var bLetters = nameStr.substr(this.random(19.999),this.random(3.999,3))
                var user = {
                    name:fLetter + bLetters,
                    age:this.random(5.9999,25),
                    city:['西安','上海','北京','成都','大连','深圳'][this.random(5.999)]
                }
                console.log('-----------------创建用户-------------');
                this.users.push(user);
            },
            reverse(){
                console.log('----------------倒序列表---------------');
                console.log('Before:',this.users.map(user =>user.name));
                this.users.reverse();
                console.log('After:',this.users.map(user =>user.name));
            }

        }
    });
</script>
</body>
</html>

在使用v-for时，最好为每个迭代元素提供一个值不重复的key，当列表渲染被重新执行时，如果不使用key，Vue回味数组成员就近复用已存在的DOM节点

小白一枚，如有问题，请多多指教😃

yulu32

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue语法：条件渲染和列表渲染

条件渲染和列表渲染1.指令v-if和v-show只需要为元素挂上v-if指令即可，与之配套的还有v-else-if和v-else，不过它们只能与v-if配合使用；v-show也可用于实现条件渲染，只不过他只是简单的切换CSS属性：display。当条件为假时，元素的display属性将被赋值为none，反之，display属性将被回复原有值。<!DOCTYPE html>&lt...
复制链接

扫一扫