Vue条件和列表渲染语句

条件渲染语句

可以把它看成if语句,条件满足时会显示标签里的内容

<p v-if="isPassed">{{ score}}</p>

<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
        //当条件满足的时候，显示这里的内容
            score: 78
        };
    },
    methods:{
        isPassed(){
            if(this.score<60) 
                return false;
            return true;
        }
    }
};
</script>

v-else-if和v-else的用法和if,else一样

列表渲染语句

循环渲染数字

<div id="app">
    <ul>
        <li v-for="item in 5" :key="item">{{ item }}</li>
    </ul>
</div>

从1开始循环遍历数字直到5结束,最终得到5个li标签

:key的作用: 为了确保每一个item是唯一的,所以需要唯一的key

循环渲染数组

<ul>
    <li v-for="(item,index) in nameList" :key="index">{{ item }}</li>
</ul>

<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            nameList:["张三","李四","王五"]
        };
    }
};
</script>

这样可以得到一个姓名列表,(item,index)代表元素和对应的下标,in nameList意思是在这个叫nameList的数组里循环

循环渲染对象

<ul>
<!-- 
    value：对象中每一项的值
    key：对象中每一项的键
    index：索引
 -->
    <li v-for="(value,key,index) in book" :key="index">值：{{ value }}--键：{{ key }}--索引：{{ index }}</li>
</ul>

<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            book:{
                bookName:'指环王',
                author:'JK 罗琳'
            }
        };
    }
};
</script>

结果如下:

遍历数组中的对象

大多情况都是遍历数组中的对象

<ul>
    <li v-for="(item,index) in books" :key="index">
        {{ index+1 }}----{{ item.title }}----{{ item.author }}----{{ item.publishedTime }}
    </li>
</ul>

<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            books: [
                {
                    title: '《魔戒》',
                    author: '约翰·罗纳德·瑞尔·托尔金',
                    publishedTime: '1954'
                },{
                    title:'《哈利·波特》',
                    author:'J·K·罗琳',
                    publishedTime:'1997'
                },{
                    title:'《人性的弱点》',
                    author:'戴尔•卡内基',
                    publishedTime:'2008'
                }
            ]
        };
    }
};
</script>

结果: