【Vue】零基础学习Vue: 第4课 vue的模板语法v-once﹑v-html

v-once 指令：

使用 v-once 指令，当数据改变时，插值处的内容不会更新。

使用方式：

使用v-once与没有v-once的对比：

  
  

    
    {{ xm }}
    
    
 {{ xm }} 
  

  
    const app = new Vue({
      el:"#app",  //获取元素
      data:{      //data内存放vue的变量
        xm:"小明",
      },    
      methods: {  //methods存放vue内定义的方法
        
      },
    })
  

没有改变变量xm值时：改变变量xm值时：

v-html 指令：

双大括号会将数据解释为普通文本，而非 HTML 代码。使用 v-html 指令可以输出真正的 HTML 文档。

使用方式：

使用v-html与没有v-html的对比：

  
  

    
    {{ div }}
    
    

  

  
    const app = new Vue({
      el:"#app",  //获取元素
      data:{      //data内存放vue的变量
        div:"
姓名：小明
",
      },    
      methods: {  //methods存放vue内定义的方法
        
      },
    })
  

运行结果如下：