Vue学习之 --- 渲染指令

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

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

    <div id="app">
        <!-- v-if 是动态的创建或动态的删除 -->
        <p v-if="flag">这是被 v-if 控制的元素</p>
        <!-- v-show 是通过样式隐藏或显示 -->
        <p v-show="flag">这是被 v-show 控制的元素</p>
        <hr>
        <button @click="switchflag">切换flag</button>
    </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">
        <!-- v-if可以单独使用，或配合v-else 指令一起使用 -->
        <div v-if= "Math.random()>0.5"> 随机数大于0.5</div>
        <div v-else>随机数小于或等于0.5</div>
        <!-- 注意v-else指令必须配合v-if指令一起使用，否则将不起作用 -->
        <hr>
        <!-- 拓展 v-else-if-->
        <div v-if="type==='A'">优秀</div>
        <div v-else-if="type==='B'">良好</div>
        <div v-else-if="type==='C'">一般</div>
        <div v-else>差</div>
        <!-- 注意v-else-if指令必须配合v-if指令一起使用，否则将不会被识别 -->
    </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">
        <!-- v-for指令演示 -->
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>索引</th>
                <th>ID</th>
                <th>姓名</th>
            </thead>
            <tbody>
                <!-- v-for指令还支持一个可选的第二个参数，即当前想的索引,语法格式为（item,index）in items -->
                <!-- 官方建议: 只要用到了v-for指令，那么一定要绑定一个:key属性，而且把id作为key的值 -->
                <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 的值必须是字符或数字类型，不能是对象类型！