Vue指令v-if、v-for、v-show

最新推荐文章于 2024-06-27 13:54:12 发布

Ivan Cheng

最新推荐文章于 2024-06-27 13:54:12 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/weixin_44970384/article/details/108885357

版权

指令
v-cloak 它会在Vue实例结束编译时从绑定的html元素上移除，经常和css的display：none配合使用if
v-if,v-else-if,v-else
和js的条件语句if、else、else if 类似，vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="lianxi">
        <p v-if="status === 1">当status为1时显示该行</p>
        <p v-else-if="status === 2">当status为2时显示该行</p>
        <p v-else>否则显示该行</p>
    </div>
    <script>
        var vm=new Vue({
            el:"#lianxi",
            data:{
                status:3

            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="lianxi">
        <template v-if="type === 'name'">
            <lable>用户名</lable>
            <input placeholder="输入用户名">

        </template> 
        <template v-else>
            <lable>邮箱</lable>
            <input placeholder="输入邮箱">

        </template>
        <button @click="handleClick">切换输入类型</button>
        <script>
            var vm = new Vue({
                el:'#lianxi',
                data:{
                    type:'name'
                },
                methods:{
                    handleClick:function(){
                        this.type=this.type === 'name'? 'mial':'name'

                    }
                }
            })
        </script>

    </div>
    

</body>
</html>

v-show：v-show的用法与v-if基本一致，只不过v-show是改变元素的CSS属性display，当v-show的表达式值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式：display：none
v-if 与v-show的选择：两者具有类似的功能，不过v-if才是真正的条件渲染，它会根据表达式适当的销毁或重建元素以及绑定的事件或子组件。若表达式的初始值为false则一开始元素或组件并不会渲染，只有当条件第一次变为真时才开始编译。而v-show只是简单的css属性切换，无论条件真与否，都会被编译。相比之下v-if更适合条件不经常改变的情境，因为它切换开销相对较大，而v-show适用于频繁切换条件。
列表渲染指令v-for：
当需要将一个数组遍历或枚举一个对象循环显示时，就会用到v-for。它的表达式需结合in来使用，类似item in items的形式，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="lianxi" v-for=>
        <ol>
            <li v-for="book in books">{{book.name}}</li>
        </ol>

    </div>
    <script>
        var vm= new Vue({
            el:'#lianxi',
            data:{
                books:[
                    {name:'《Vue实战》'},
                    {name:'《Javascript语言精粹》'},
                    {name:'《Java高级程序设计》'},
                ]
            }
        })
    </script>
    
</body>
</html>

Ivan Cheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue指令v-if、v-for、v-show

指令v-cloak 它会在Vue实例结束编译时从绑定的html元素上移除，经常和css的display：none配合使用ifv-if,v-else-if,v-else和js的条件语句if、else、else if 类似，vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n
复制链接

扫一扫