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

条件渲染和列表渲染

1.指令v-if和v-show

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


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

    <h1>-----------v-show-------------h1>
    <h2 v-show="visible">v-show,visible = trueh2>
    <h2 v-show="!visible">v-show,visible = falseh2>
    <h2 v-if="visible">v-if,visible = trueh2>
    <h2 v-else>v-if,visible = falseh2>

div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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的语法,例如:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令v-if和v-showtitle>
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/[email protected]/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()方法,


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令v-if和v-showtitle>
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/[email protected]/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节点


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

你可能感兴趣的:(Vue)