条件付きの
- V-IF
直接の例に！（ボディタグ内）
<script type="text/javascript" src="js/vue.js"></script>
<div id="test">
<span v-if="ok">这里有一些水果：</span>
<template v-if="check">
<p>苹果</p>
<p>香蕉</p>
<p>雪梨</p>
</template>
</div>
<script type="text/javascript">
new Vue({
el:'#test',
data:{
ok:true,
check:true
}
});
</script>
結果は、直接テストランをコピーすることができます
- V-ELSE
直接コードに、上記に基づいて、追加されました
<span v-if="ok">这里有一些水果：</span>
<span v-else>这里没有水果</span>
<template v-if="check">
<p>苹果</p>
<p>香蕉</p>
<p>雪梨</p>
</template>
- V-ELSE-IF
直接コードに
<div id="test">
<span v-if="check=='A'">100</span>
<span v-else-if="check=='B'">90</span>
<span v-else-if="check=='C'">80</span>
<span v-else-if="check=='D'">70</span>
<span v-else>60</span>
</div>
<script type="text/javascript">
new Vue({
el:'#test',
data:{
ok:true,
check:'A'
}
});
</script>
V-他に、V-ELSE-IF V-IFまたはV-ELSE-IF、その後で必要。
- V-ショー
<div id="test">
<span v-if="check=='A'">100</span>
<span v-else-if="check=='B'">90</span>
<span v-else-if="check=='C'">80</span>
<span v-else-if="check=='D'">70</span>
<span v-else>60</span>
<p v-show="ok">我在这里</p>
</div>
<script type="text/javascript">
new Vue({
el:'#test',
data:{
ok:true,
check:'A'
}
});
</script><div id="test">
<p v-show="ok">我在这里</p>
</div>
<script type="text/javascript">
new Vue({
el:'#test',
data:{
ok:true,
check:'A'
}
});
</script>
循環
V-のための指示をリサイクル。
- 形で
v-for="todo in todos"（単一ラベル）
V-命令は特別な構文、サイトの形でサイト内のサイトに必要な、ソース・データ・アレイは、反復サイトエイリアスの配列要素です。
V-のためには、リストをレンダリングするためにデータ配列にバインドすることができます。
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
todos:[{text:'Jafe'},
{text:'Charlotte'},
{text:'哈哈哈'}]
}
});
</script>
レンダリング：
- 両者の形で
v-for="todo in todos"（ブロックタグ）
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<ul>
<div v-for="todo in todos">
<li >
{{todo.text}}
</li>
<li>
--------------------
</li>
</div>
</ul>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
todos:[{text:'Jafe'},
{text:'Charlotte'},
{text:'哈哈哈'}]
}
});
</script>
レンダリング：
- 3の形で
todo in todos（オブジェクト全体）
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<ul>
<div v-for="todo in todos">
<li >
{{todo}}
</li>
<li>
-----分割线--------
</li>
</div>
</ul>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
todos:{
text:'Jafe',
number:123,
age:22
}
}
});
</script>
レンダリング：
4. 4の形態v-for="(todo,key) in todos"（値、キー）
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<ul>
<div v-for="(todo,key) in todos">
<li >
{{key}}:{{todo}}
</li>
<li>
-----分割线--------
</li>
</div>
</ul>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
todos:{
text:'Jafe',
number:123,
age:22
}
}
});
</script>
レンダリング：
- 5の形で
v-for="(todo,key,index) in todos"（値、キーインデックス）
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<ul>
<div v-for="(todo,key,index) in todos">
<li >
{{index}}:{{key}}:{{todo}}
</li>
<li>
-----分割线--------
</li>
</div>
</ul>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
todos:{
text:'Jafe',
number:123,
age:22
}
}
});
</script>
レンダリング：
- 6の形で
v-for="site in 10"（一定の形態）
<script type="text/javascript" src="js/vue.js"></script>
<div id="test">
<ul>
<li v-for="site in 10">
这是第{{site}}个
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#test'
});
</script>
レンダリング：
