Vee構文:条件付きレンダリングとリストレンダリング

40665 ワード

条件付きレンダリングとリストレンダリング
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
    1つ以上の要素を配列の末尾に追加し、新しい配列の長さを返します.
    pop
    配列から最後の要素を削除して返します
    shift
    配列から最初の要素を削除して返します
    unshift
    1つ以上の要素を配列の先頭に追加し、新しい配列の長さを返します.
    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ノードを近接多重化する.
    白さん一枚、問題があれば、よろしくお願いします.