Vue学习之 --- 渲染指令

1.v-if,v-show渲染指令

v-if 是动态的创建或动态的删除,v-show 是通过样式隐藏或显示.

    <div id="app">
        
        <p v-if="flag">这是被 v-if 控制的元素p>
        
        <p v-show="flag">这是被 v-show 控制的元素p>
        <hr>
        <button @click="switchflag">切换flagbutton>
    div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{
                switchflag(){
                    this.flag = !this.flag
                    console.log("flag的值是:"+this.flag)
                }
            }
        })
    script>

v-if 可以单独使用，或配合v-else 指令一起使用 .还可以使用 v-else-if 语句.

     <div id="app">
        
        <div v-if= "Math.random()>0.5"> 随机数大于0.5div>
        <div v-else>随机数小于或等于0.5div>
        
        <hr>
        
        <div v-if="type==='A'">优秀div>
        <div v-else-if="type==='B'">良好div>
        <div v-else-if="type==='C'">一般div>
        <div v-else>差div>
        
    div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                type: 'A'
            }
        })
    script>

注意 : v-else指令必须配合v-if指令一起使用，否则将不起作用 !
注意 : v-else-if指令必须配合v-if指令一起使用，否则将不会被识别 !

2.v-for 列表渲染指令

Vue 提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。 v-for 指令需要使用 item in items形式的特殊语法，其中

1. items 是待循环的数组.
2. item 是被循环的每一项.

    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.css">
    <div id="app">
        
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>索引th>
                <th>IDth>
                <th>姓名th>
            thead>
            <tbody>
                
                
                <tr v-for="(item,index) in list" :key="item.id" title="item.name"> 
                    <td>{{index}}td>
                    <td>{{ item.id }}td>
                    <td>{{ item.name }}td>
                tr>
            tbody>
        table>
    div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'张三'},
                    {id:2,name:'李四'},
                    {id:3,name:'王五'},
                    {id:4,name:'麻子'}
                ]
            }
        })
    script>

注意： key 的值必须是字符或数字类型，不能是对象类型！