zoukankan      html  css  js  c++  java
  • Vue模板语法——数据绑定指令

    一、数据绑定指令

    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>
    

    结果:
    {{msg}}

  • 相关阅读:
    修改VNC的分辨率
    How to use WinSCP with public key authentication
    CentOS-7-x86_64-DVD-1511.iso
    6.828
    Tampermonkey版Vimium
    servlet+jsp完成简单登录
    Servlet知识点小结
    HTTP基础知识点小结
    LeetCode 371两数之和
    LeetCode53 最大子序列问题
  • 原文地址:https://www.cnblogs.com/fpgz99810/p/12463678.html
Copyright © 2011-2022 走看看