Vue.js 学习笔记: 第三课

       在Vue.js中有一个不成文的规定，{{ }}双大括号和" "双引号的影响是一样的，所以这二者在一定程度上有一种有我没你，有你没我的性质。

       对于Vue中显示效果的 if 条件判断是用v-if、v-else-if、v-else 

     

<div id="app-1"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div>

new Vue({ el: '#app-1', data: { type: 'C' } })

也可以用v-show 这种方法去控制

<div id="app-2"> <h1 v-show="ok">Hello!</h1> </div>

new Vue({ el: '#app-2', data: { ok: true } })

v-if 和 v-show 区别：

v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。

v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。

 

接下来讲讲关于v-for 这个标签的事情，

v-for第一种就是可以循环遍历数组。

<div id="app-3"> <ol> <li v-for="site in sites">{site.name}</li> </ol> </div>

var app3 = new Vue({el:"#app-3",data:{sites:[{name:'Runoob'},{name:'Google'},{name:'Taobao'}]}})

其实不只是<ol><li>  其他的标签也可以，换成<div><p>照样可以

 

v-for 第二种就是可以遍历对象，Json格式那种

<div id="app-4">

<ul>

    <li v-for="value in object">

    {{value}}

     </li>

</ul>

</div>

var app4 = new Vue({

el:"#app-4",

data:{

   object:{

       name:"菜鸟教程",

       url:"http://www.runoob.com",

      slogan:"学的不仅是技术,更是梦想!"

}

}

})

这样输出来的就是:

• 菜鸟教程
• http://www.runoob.com
• 学的不仅是技术，更是梦想！ 

 

那如果想把key取到呢？

<div id="app-5">

<ul>

<li v-for="(value,key) in object">

{{key}}:{{value}}

</li>

</ul>

</div>

var app5 = new Vue({

el:"#app-5",

data:{

object:{

name:"菜鸟教程",

url:"http://www.runoob.com",

slogan:"学的不仅是技术，更是梦想！"

}

}

})

这样的输出结果就是带key和value的:

• name : 菜鸟教程
• url : http://www.runoob.com
• slogan : 学的不仅是技术，更是梦想！

<div id="app-6">

<ul>

<li v-for="(value,key,index) in object">

{{index}}.{{key}} : {{value}}

</li>

</ul>

</div>

var app6 = new Vue({

el:"#app-6",

data:{

object:{

name:"菜鸟教程",

url:"http://www.runoob.com",

slogan:"学的不仅是技术,更是梦想!"

}

}

})

• 0. name : 菜鸟教程
• 1. url : http://www.runoob.com
• 2. slogan : 学的不仅是技术，更是梦想！

 

<div id="app-7">

<ul>

  <li v-for="n in 10">

  {{n}}

</li>

</ul>

</div>

var app7 = new Vue({

el:"#app-7"

})