插值操作-其他指令的使用(v-once)(v-html)(v-text)(v-pre)(v-cloak)

插值操作-其他指令的使用

1、v-once

在这里插入图片描述

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

如下图所示:当使用了v-once语法时,在修改值时并不会有所改变
在这里插入图片描述

2、v-html

在这里插入图片描述

<div id="app">
    {
    
    {
    
    message}}
    <h3 v-html="url"></h3>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
    
    
        el: '#app',
        data: {
    
    
            message:'你好呀',
            url:'<a href = "http://www.baidu.com">百度一下</a>'
        }
    })
</script>

在这里插入图片描述

3、v-text

在这里插入图片描述

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

在这里插入图片描述

4、v-pre

在这里插入图片描述

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

在这里插入图片描述

5、v-cloak

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_46112274/article/details/121070885