Vue分支用法&循环的写法

1.分支语法：先是v-if，中间的部分用v-else-if,最后用v-else;     

<h1>根据分数评级</h1>
            <input type="text" v-model="score" />
        <br />
        等级:
        <span v-if="score>=90">优秀</span>
        <span v-else-if="score>=80">良好</span>
        <span v-else-if="score>=70">中等</span>
        <span v-else-if="score>=60">及格</span>
        <span v-else>不及格</span>
        </div>
    
       <script src="../js/vue.js"></script>
       <script>
        const app = new Vue({
            el:"#app",
            data: {
                score: 0
            }
        })

2.循环的写法

 vue中的循环 v-for 1.循环获取数据的内容 2.可以循环复制标签 参数说明: item: 变量名称 名称任意 ；in: 关键字 固定写法； array: 要遍历的数据 

<div id="app">
            <h1 v-for="item in array">{{item}}</h1>
        <hr />

<!-- v-for语法2: 获取数据/下标 -->
            <h1 v-for="(item,index) in array">{{item}}--{{index}}</h1>
        <hr />

<!-- 循环遍历集合信息 -->
            <div v-for="item in userList">
            <p>ID号:{{item.id}}</p>
            <p>名称:{{item.name}}</p>
            </div>

<!-- 如果直接遍历对象,则输出的value值 参数说明: 1.value 对象的值 2.对象的key 3.数据的下标 -->value和可以的位置在这里是反的，而且indexer可加可不加，不常用

<hr />
            <div v-for="(value,key,index) in user">{{key}}--{{value}}--{{index}}</div>
        </div>
        </div>
        
        <script src="../js/vue.js"></script>
        <script>
        const app = new Vue({
            el:"#app",
            data: {
                array: ["安其拉","孙悟空","诸葛亮"],
                userList: [{
                    id: 100,
                    name: "鲁班旗号"
                },{
                    id: 200,
                    name: "凯"
                },{
                    id: 300,
                    name: "摇摇公主"
                } ]，

                    user: {
                            id: 240,
                            name: "貂蝉",
                            age: 28
                }
            }
        })