当前位置：网站首页>6.常用指令（上）v-cloak，v-once，v-pre

6.常用指令（上）v-cloak，v-once，v-pre

2022-06-25 22:06:00 【彼岸的饭碗】

v-cloak

v-cloak指令的作用是vue示例渲染后关联结束

双大括号插值语法在遇到网络延迟的时候会显示编译前的文本

<body>
    <div id="app">
        <p>{
   {a}}</p>
    </div>
    <script src="vue.js"></script>
    <script> var vue=new Vue({
      el:"#app", data:{
      a:"我是渲染的指令 v-cloak" }, }) </script>
</body>

在此，我们可以使用v-cloak结合CSS解决双大括号渲染的难题

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> [v-cloak]{
      display: none; } </style>
</head>
<body>
    <div id="app">
        <p v-cloak>{
   {a}}</p>
    </div>
    <script src="vue.js"></script>
    <script> var vue=new Vue({
      el:"#app", data:{
      a:"我是渲染的指令 v-cloak" }, }) </script>
</body>

[v-cloak]css选择器选择的是html结构中有v-cloak的属性，有这个属性的元素设置display为none，由于v-cloak这个属性在vue的实例加载完之后关联结果，所以就需要这个元素的隐藏状态，这样造成的结果就是，要么空白，要么显示编译后的文本。

v-once

v-once的作用是只会渲染对应元素一次，数据更新不会引起视图的更新，目的是为了优化页面。

<body>
    <div id="app">
       <h2 v-once>{
   {a}}</h2>
       <button @click="add">点我加一</button>
       <button @click="minus">点我减一</button>
    </div>
    <script src="vue.js"></script>
    <script> var vue=new Vue({
      el:"#app", data:{
      a:100 }, methods:{
      add(){
      this.a++ console.log(this.a) }, minus(){
      this.a-- console.log(this.a) } } }) </script>
</body>