Vue.js 选择语法

Conditionals and rendering list

 

1. v-if v-else / v-else-if

当你只想展示一部分 页面的时候

比如 你想展示 error message 你就可以使用这些条件语句

重点： 当我们用这种方法隐藏一段话 我们前往console会发现 v-if detach 这一段话

detach不意味着隐藏 和 能见度调为0

detach意味着删除 移除整个page

---

2. Template header

<template> </template>

这个区块是最方便与 v-if 相结合的 

源自于template 不会出现在 DOM中 却可以合并包含一批data

---

3. v-show

在 v-if 中 我提到  它完全移除或者增加 一些出现在网页上的DOM

但是如果用v-show =  false 的话

如果消失了 只是在 style = “display： none” 只是让它消失 

在console 中还是可以查看到的

v-if 帮助我们简化 DOM 

---

4. v-for

iterate 整个list 我们想去把list中的item依次给直接在page中显示出来

在别的语言中 c java python ruby 

我们都知道有for loop 和 while loop

vue 直接帮我们生成一个for loop

用法：

<div id="app">
    <ul>
        <li v-for="i in foods"> {{ i }}</li>
    </ul>
</div>

---- In the Js file --
var vm = new Vue({
    el: "#app",
    data: {
         foods: ['meat', 'veg', 'chips']   
    }
});

同时 我们可以修改为

"(f, i) in foods" 

f array里面的item

i 是系数 0.1.2.3