Vee構文:条件付きレンダリングとリストレンダリング
40665 ワード
条件付きレンダリングとリストレンダリング
1.命令v-ifとv-show
要素にv-ifコマンドを掛けるだけでいいです.これとセットになっているのはv-else-ifとv-elseですが、v-ifと組み合わせて使用するしかありません.v-showは条件レンダリングにも使用できますが、CSSプロパティ:displayを簡単に切り替えるだけです.条件が偽の場合、要素のdisplayプロパティはnoneに割り当てられ、逆にdisplayプロパティは元の値に戻されます. v-ifスイッチでは、コンポーネントが破棄されると、DOMには存在しないため、どのようにしても取得できません. v-showはより高い初期レンダリングオーバーヘッドを有し、v-ifはより高いスイッチングオーバーヘッドを有する. v-showはtemplate要素 をサポートしていません
2.命令v-for
item initemsまたはitem of itemsの構文は、次のように使用できます.データ応答に関する配列法 名前
説明
push
1つ以上の要素を配列の末尾に追加し、新しい配列の長さを返します.
pop
配列から最後の要素を削除して返します
shift
配列から最初の要素を削除して返します
unshift
1つ以上の要素を配列の先頭に追加し、新しい配列の長さを返します.
splice
配列から要素を削除するか、配列に要素を追加します.
sort
配列要素のソートは、デフォルトでUnicode符号化に従ってソートされ、ソートされた配列を返します.
reverse
配列内の要素の位置を逆さまにし、逆さまの配列を返します.
以下にpush()とreverse()の方法を簡単に例示します.
v-forを使用する場合は、各反復要素に重複しない値のkeyを提供することが望ましい.リストレンダリングが再実行されると、keyを使用しない場合、Vue回想配列メンバーは既存のDOMノードを近接多重化する.
白さん一枚、問題があれば、よろしくお願いします.
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>
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ノードを近接多重化する.
白さん一枚、問題があれば、よろしくお願いします.