Vue (2)

最新推荐文章于 2024-08-03 20:57:01 发布

蓝搜香菇

最新推荐文章于 2024-08-03 20:57:01 发布

阅读量229

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/daiism/article/details/136711093

版权

指令

v-if 做判断，隐藏(是否存在)
v-show 隐藏(是否展示) 默认隐藏
v-else和v-else-if判断

<body>
    <div id="app">
        <h3 v-if="x">我是一段文本11111</h3>
        <h3 v-show="y">我是一段文本55555555</h3>
    </div>
</body>
<script>
    Vue.config.productionTip=false;
    var app=new Vue({
        el:"#app",
        data(){                    
            return{
                x:true,   //会显示
                y:false,   //不会显示
            }
        }
    })
</script>

v-if和v-show的区别

对于元素只是一次可以选择使用v-if(消耗内存),操作次数多v-show(并没有销毁元素)
v-if隐藏（是否存在），
v-show隐藏（是否展示）

v-if和v-for谁的优先级高

在vue2中，v-for优先级比v-if高，
在vue3中，v-if优先级比v-for高
v-if和v-for不能同时使用
同时使用需要在外层嵌套盒子，在外层进行v-if判断，在内层进行v-for循环

v-text和v-html，插值的区别

相同点：都会覆盖文本
不同点： v-text只读取文本，v-html读取标签
插值添加值
（不要在用提交时使用v-html,不要在动态渲染时时使用v-html）

v-cloak
解决屏幕闪烁的问题，第一在标签上添加v-cloak,第二需要设置上面样式
v-once
设置了以后，更改值不会发生改变，优化性能
v-pre
设置了以后，会让插值和指令失效

<style>
        [v-cloak]{
            display: none;
        }
    </style>
<body>
    <h1 v-cloak>{{c}}</h1>
    <h1 v-pre v-show="num==1">数字会不会加1{{num}}</h1>
     <h1 v-once>{{num}}</h1>
</body>
<script>
    Vue.config.productionTip=false;
    var app=new Vue({
        el:"#app",
        data(){                    
            return{
               c:"我是一段测试文本",
               num:0,
            }
        }
    })
</script>