Vue选项之delimiters修改插值符

有时候我们使用"{{内容}}",当后台的插值符跟现有的插值符有冲突时,这时就要改变我们的插值符,操作如下:

  <body>
    <div id="app">
        <!-- 插值符改为了es6插值形式了 -->
        ${num}
        <p><button @click="add">ADD</button></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
     
      let app = new Vue({
        el: '#app',
        data:{
            num:1
        },
        methods:{
            add(){    
                this.num++;
            }
        },
        delimiters:['${','}']
      })
    </script>
  </body>

官网也有介绍:在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/xiaodi520520/article/details/88826796