03-Vue长用指令

最新推荐文章于 2024-04-26 16:32:51 发布

无味无感

最新推荐文章于 2024-04-26 16:32:51 发布

阅读量67

点赞数

分类专栏： VueJs

本文链接：https://blog.csdn.net/qq_41863998/article/details/117694819

版权

VueJs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

once指令

由于Vue是响应式的,Model层中的数据发生改变页面也会跟着马上改变；v-once指令就是由于解决特性情况的，加上它后页面正常显示数据，后面Model中数据发生改变了页面数据也不会改变

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <H1>{{message}}</H1>
  <h1 v-once>{{message}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue ({
    el:'#app',
    data:{
      message:'张三'
    }
  })
</script>

</body>
</html>

html指令

v-html用来解决动态加载html元素的,mustache是不能直接渲染出来元素的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  這里直接用mustache语法是不能正常渲染a标签元素的-->
  <h1>{{url}}</h1>
<!--  v-html指令是可以直接解决动态渲染元素這个问题的-->
  <h1 v-html="url"></h1>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue ({
    el:'#app',
    data:{
      url:'<a href="https://www.baidu.com/">百度一下</a>'
    }
  })
</script>
</body>
</html>

text指令

v-text指令可以直接传变量，但是会覆盖数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  mustache语法是不会覆盖文本的，v-text指令可以直接传变量，但是会覆盖数据-->
  <h1>{{message}},李四</h1>
  <h1 v-text="message"></h1>
  <h1 v-text="message">,李四</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue ({
    el:'#app',
    data:{
      message:'百度一下'
    }
  })
</script>
</body>
</html>

cloak指令

当Vue解析html的时候，由于mustache语法会带有两个中括号展示时非常的不美观；cloak就是用来解决这个问题的；
cloak在Vue解析后会把当前这个元素去掉；所以在Vue还没有解析之前利用这个属性用Css把当前加cloak元素隐藏起来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  [v-cloak] {
    display:none;
  }
</style>
<body>
<div id="app">
  <h1>{{message}}</h1>
  <h1 v-cloak>{{message}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  setTimeout(function (){
    const app = new Vue ({
      el:'#app',
      data:{
        message:'张三'
      }
    })
  },1000)
</script>
</body>
</html>