零基础学习Vue:第2课 Vue的模板语法v-once﹑v-html

零基础学习Vue:第2课 Vue的模板语法v-once﹑v-html

v-once 指令:

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

使用方式:

<div  v-once> div>

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

<body>
  
  <div id="app">
    
    {{ xm }}
    
    <div style="background-color:pink" v-once> {{ xm }} div>
  div>

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

body>

没有改变变量xm值时:
零基础学习Vue:第2课 Vue的模板语法v-once﹑v-html_第1张图片
改变变量xm值时:
零基础学习Vue:第2课 Vue的模板语法v-once﹑v-html_第2张图片

v-html 指令:

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

使用方式:

<div v-html="div">div>

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

<body>
  
  <div id="app">
    
    {{ div }}
    
    <div style="background-color:pink" v-html="div">div>
  div>

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

运行结果如下:
在这里插入图片描述

你可能感兴趣的:(vue,v-once,vue,vue零基础学习,v-html)