博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Vue模板语法——数据绑定指令

Posted on 2024-01-28 11:55  linFen  阅读(14)  评论(0编辑  收藏  举报

一、数据绑定指令

  1. v-text 填充纯文本

    相比插值表达式更加简洁

  2. v-html 填充HTML片段

    • 存在安全问题
    • 本网站内部数据可以使用,来自第三方的数据不可以用
  3. v-pre 填充原始信息

    显示原始信息,跳过编译过程(分析编译过程)


二、v-text 填充纯文本

  1. v-text用法

    在需填充的标签中添加v-text指令

  2. 例如

      <div id='app'>
        <div v-text="msg"></div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
         new Vue({
               el:'#app',
               data:{
                  msg:'HelloWorld'
               }
         })
      </script>

结果:HelloWorld

三、v-html 填充HTML片段

  1. v-html用法

    在需填充的标签中添加v-html指令

  2. 例如

      <div id='app'>
        <div v-html="msg"></div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
         new Vue({
               el:'#app',
               data:{
                  msg:'<h1>HelloWorld</h1>'
               }
         })
      </script>

结果:

HelloWorld

四、v-pre 填充原始信息

  1. v-pre用法

    在需填充的标签中添加v-pre指令

  2. 例如

      <div id='app'>
        <div v-pre>{{msg}}</div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
         new Vue({
               el:'#app',
               data:{
                  msg:'<h1>HelloWorld</h1>'
               }
         })
      </script>