vue基础语法——插值操作-其他指令

双大括号{ {}}语法

  • 如何将data中的文本数据,插入到HTML中呢?
    • 可以通过Mustache语法(也就是双大括号)。
    • Mustache: 胡子/胡须.
  • 我们可以像下面这样来使用,并且数据是响应式的
    vue基础语法——插值操作-其他指令_第1张图片

v-once

  • 但是,在某些情况下,我们可能不希望界面随意的跟随改变
    • 这个时候,我们就可以使用一个Vue的指令
  • v-once:
    • 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
    • 该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变。
  • 代码如下:
    <div id="app">
        <h2>{
          {message}}h2>
        <h2 v-once>{
          {message}}h2>
    div>
    <script src="../js/vue.js">script>
    <script>
        const app = new Vue({
            
            el: '#app',
            data: {
            
                message: '你好啊'
            }
        })
    script>
    
  • 效果展示

v-html

  • 某些情况下,我们从服务器请求到的数据本身就是一个HTML代码
    • 如果我们直接通过{ {}}来输出,会将HTML代码也一起输出。
    • 但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。
  • 如果我们希望解析出HTML展示
    • 可以使用v-html指令
      • 该指令后面往往会跟上一个string类型
      • 会将string的html解析出来并且进行渲染
        vue基础语法——插值操作-其他指令_第2张图片

v-text

  • v-text作用和Mustache比较相似:都是用于将数据显示在界面中

  • v-text通常情况下,接受一个string类型

    <div id="app">
        <h2>{
          {message}}h2>
        <h2>{
          {message}},123h2>
        <h2 v-text="message">h2>
        <h2 v-text="message">,123h2>
    div>
    <script src="../js/vue.js">script>
    <script>
        const app = new Vue({
            
            el: '#app',
            data: {
            
                message: '你好啊'
            }
        })
    
    script>
    
  • 展示效果如下vue基础语法——插值操作-其他指令_第3张图片

v-pre

  • v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。
  • 比如下面的代码:
    • 第一个h2元素中的内容会被编译解析出来对应的内容

    • 第二个h2元素中会直接显示{ {message}}

      <div id="app">
          <h2>{
              {message}}h2>
          <h2 v-pre>{
              {message}}h2>
      div>
      <script src="../js/vue.js">script>
      <script>
          const app = new Vue({
                
              el: '#app',
              data: {
                
                  message: '你好啊'
              }
          })
      script>
      

      vue基础语法——插值操作-其他指令_第4张图片

v-cloak

  • 在某些情况下,我们浏览器可能会直接显然出未编译的Mustache标签。
  • cloak: 斗篷
  • 代码展示
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <style>
            [v-cloak]{
            
                display: none;
            }
        style>
    head>
    <body>
        <div id="app">
            <h2 v-cloak>{
          {message}}h2>
            <h2>{
          {message2}}h2>
        div>
        <script src="../js/vue.js">script>
        <script>
            //在vue解析之前,div中有一个属性v-cloak
            //在vue解析之后,div中没有一个属性v-cloak
            setTimeout(function(){
            
                const app = new Vue({
            
                    el: '#app',
                    data: {
            
                        message: '你好啊',
                        message2: '你好啊2'
                    }
                })
            },1000)
        script>
    body>
    html>
    
  • 效果展示

你可能感兴趣的:(#,Vue)