vue3.0都更新了什么，10分钟让你都知道。

最新推荐文章于 2024-07-23 21:09:38 发布

a无聊

最新推荐文章于 2024-07-23 21:09:38 发布

阅读量963

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/rdl111/article/details/123188077

版权

1.内置指令

内置指令有哪些？

内置指令指的就是Vue自带指令，可以直接在项目中使用。一共有 16 个自带指令，包括了： v-text 、 v-html 、 v-show 、 v-if 、 v-else 、 v-else-if 、 v-for 、 v-on 、 v-bind 、 v-model 、 v-slot 、 v-pre 、 v-cloak 、 v-once 、 v-memo 、 v-is。

-1.v-for

使用 v-for 指令把数组的选项列表进行渲染。 v-for 指令需要使用 item in items 形式的特殊语法， items 是源数据数组， item 是数组元素迭代的别名。

-2 v-else-if

v-if 、 v-else 与 v-else-if 是Vue中用于条件判断的指令，与后端中的if、else、ifelse一致。当条件过多时，使用v-if 会使得代码太过复杂，不便于观看，所以条件过多时使用计算属性来进行条件的判断较为合适。

-3 v-for与v-if能不能使用？

在处于同一节点的时候，v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。即——先运行v-for 的循环，然后在每一个v-for 的循环中，再进行 v-if 的条件对比。所以，不推荐v-if和v-for同时使用。

-4 v-show

“v-show的用法与v-if基本一致，只不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时，元素会隐藏，查看元素加载内联样式display:none。”

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入最新的vue稳定版本-->
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<!--理解v-cloak指令的作用，以及应用场景-->
<div id="app" >

    <!--javaScript里面的等于号是===-->
    <!--v-show、指令-->
    <p v-show="status==1">当status为1时，显示该行</p>
</div>
<!--script脚本-->
<script>
    //创建vue实例
    var  vue=new Vue({
        el: '#app',
        data: {
            status: 2
        }
    });
</script>
</body>
</html>