Vueの条件文とループ文---kalrry
1.v-if条件ステートメント
1. v-if
<div id="app">
<p v-if="ok">v-if条件判读</p>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
2. v-else
ランダムに数値を生成し、それが0.5より大きいかどうかを判断してから、対応する情報を出力します。
<div id="app">
<p v-if="Math.random()>0.5">
Sorry</p>
<p v-else>Not Sorry</p>
</div>
<script>
new Vue({
el: '#app'
})
</script>
3.v-else-if
v-ifとともに使用して、if-elseif-else構造を形成します
<div id="app">
<p v-if="grade>=85">优秀</p>
<p v-else-if="grade>=70 && grade<850">良好</p>
<P v-else-if="grade>=60 && grade<70">及格</P>
<p v-else>不及格</p>
</div>
<script>
new Vue({
el: '#app',
data:{
grade: Math.random()*100
}
})
4.v-show
v-showディレクティブを使用して、要素を条件付きで表示することもできます
<div id="app">
<p v-show="ok">我们也可以使用 v-show 指令来根据条件展示元素</p>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
2.v-forループ命令
v-forディレクティブでは、sitesの形式で特別な構文が必要です。sitesはソースデータの配列であり、siteは配列要素の反復のエイリアスです。
1.例：v-forループ配列レンダリングリスト
<div id="app">
<li v-for="item in browser">{
{
item.name}}</li>
</div>
<script>
new Vue({
el: '#app',
data: {
browser:[{
name: 'Chrome' },{
name: 'IE' },{
name: 'FireFox' }]
}
})
</script>
2.例：v-forループオブジェクトのレンダリングリスト
<div id="app">
<ul>
<li v-for="value in object">
{
{
value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
3.例：2番目のパラメーターをキー名として使用します
<div id="app">
<li v-for="(value,key) in person">{
{
key}}：{
{
value}}</li>
</div>
<script>
new Vue({
el: '#app',
data: {
person: {
name: "Tom",
age: 16,
sex: "男"
}
}
})
</script>
4.例：3番目のパラメーターをインデックスとして使用します
<div id="app">
<li v-for="(value,key,index) in person">{
{
key}}：{
{
value}}--->{
{
index}}</li>
</div>
5.例：整数のリストを作成するためのv-forループ
<div id="app">
<li v-for="num in 10">{
{
num}}</li>
</div>