v-text：以纯文本方式显示数据；

v-html：可以识别HTML标签；

v-once：只渲染元素或组件一次；

v-pre：不进行编译，直接显示内容；

v-cloak：可以隐藏未编译的 Mustache 标签直到实例准备完毕，也就是隐藏{{}}；

v-text与v-html的示例：

<script type="text/javascript" src="../js/vue.js" ></script>

    <script>

        window.onload= () =>{new Vue({

            el:'#two',

            data:{

                msg:"欢迎来到perfect*博客园！！！"

            }

        })

        }

    </script>

    <body>

        <div id="two">

        <input type="text" v-model="msg" />

        <h2>{{msg}}</h2>

        <h2 v-text="msg"></h2>

        <h2 v-html="msg"></h2>

</div>

    </body>

由效果图可以看出v-html可以识别HTML标签，进行了换行

v-once与v-pre指令：

代码只修改了HTML部分，代码：

<body>

        <div id="two">

        <input type="text" v-model="msg" />

        <h2 v-pre>{{msg}}</h2>

        <h2 v-text="msg"></h2>

        <h2 v-html="msg" v-once></h2>

</div>

    </body>

由效果图可知，v-once可控制不受input组件的影响，v-pre直接显示其内容

v-cloak指令

注意：需要进行写css样式，不然v-cloak指令无作用；

初始效果：

页面上有{{msg}}显示，而我们不想让它显示出来，因此需要使用v-cloak指令，并且写其样式：

最终效果如下：

vue:

<script>

        window.onload= () =>{new Vue({

            el:'#two',

            data:{

                msg:"欢迎来到perfect*博客园！！！"

            },

            created:function(){

                alert('生命周期函数!!');

            }

        })

        }

    </script>

css:

<style>

        [v-cloak]{

            display: none;

        }

    </style>

html:

<div id="two">

        <input type="text" v-model="msg" />

        <!--<h2 v-pre>{{msg}}</h2>-->

        <h2 v-cloak>{{msg}}</h2>

        <h2 v-text="msg"></h2>

        <h2 v-html="msg" v-once></h2>

</div>

代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>v-model</title>

     </head>

     <script type="text/javascript" src="../js/vue.js" ></script>

     <script>

         window.onload= () =>{new Vue({

             el:'#two',

             data:{

                 msg:"欢迎来到perfect*博客园！！！"

             },

             created:function(){

                 alert('生命周期函数!!');

             }

         })

         }

     </script>

     <style>

         [v-cloak]{

             display: none;

         }

     </style>

     <body>

         <div id="two">

         <input type="text" v-model="msg" />

         <!--<h2 v-pre>{{msg}}</h2>-->

         <h2 v-cloak>{{msg}}</h2>

         <h2 v-text="msg"></h2>

         <h2 v-html="msg" v-once></h2>

 </div>

     </body>

 </html>

以上示例所有代码

v-text v-html等指令的使用的更多相关文章

  1. 转：V$SQL,V$SQLAREA,V$SQLTEXT

    V$SQL*表用于查看Shared SQL Area中SQL情况 V$SQLTEXT V$SQLTEXT用途很简单,就是用来查看完整的SQL语句,V$SQL和V$SQLAREA只能显示1000 byt ...

  2. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  3. v$session & v$session_wait

    (1)v$session v$session视图记录了当前连接到数据库的session信息 Column Description SADDR session address SID Session i ...

  4. A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes

    A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes (文 ...

  5. 错误提示：Dynamic Performance Tables not accessible, Automatic Statistics Disabled for this session You can disable statistics in the preference menu,or obtanin select priviliges on the v$session,v$sess

    1.错误提示:Dynamic Performance Tables not accessible, Automatic Statistics Disabled for this session You ...

  6. 动态性能视图v$mystat,v$sesstat,v$statname

    视图说明: v$mystat-------> 当前会话统计 v$sesstat------> 按会话进行分组统计 v$sysstat-------> 当系统的整体统计 v$statn ...

  7. Oracle v$session/v$sql 表

    在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...

  8. oracle常用视图v$mystat v$sesstat v$sysstat v$statname v$thread v$ parameter v$session v$process

    这两天看了盖国强老师的<<深入浅出>>,很佩服盖老师钻研的精神.书中常用到一个查询语句,为了获取当前会话的跟踪文件路径,sql如下: SELECT d.VALUE || '/' ...

  9. 学习动态性能表(4)--v$sqltext&v$sqlarea

    学习动态性能表 第四篇-(1)-V$SQLTEXT  2007.5.29 本视图包括Shared pool中SQL语句的完整文本,一条SQL语句可能分成多个块被保存于多个记录内. 注:V$SQLARE ...

  10. 转：Oracle里几组重要的视图--v$sysstat，v$system_event，v$parameter v$system_parameter

    按组分的几组重要的性能视图 1.System 的 over view v$sysstat , v$system_event  , v$parameter,V$instance得到oracle_sid ...

随机推荐

  1. jenkins基于gradle打包说明

    gradle.proerties文件中添加下面配置会更快 org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfM ...

  2. node-rsa 非对称加密和解密

    使用公钥和私钥的加密和解密: 非对称加密的关键在于 有 公钥 / 私钥用法:a.生成一对公钥私钥b.公钥加密 -> 对应私钥解密c.私钥加密 -> 对应公钥解密 非对称加密的常见应用方式a ...

  3. Java编写email实现内容换行

    用java编写的发送邮件要使用<br>来实现换行,而不能使用\n,或者\r\n // 5. Content: 邮件正文(可以使用html标签)(内容有广告嫌疑,避免被邮件服务器误认为是滥发 ...

  4. iOS UI基础-11.0 UINavigationController

    导航控制器 利用UINavigationController,可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型例子就是系统自带的“设置”应用 UINavigationController的使用 ...

  5. 巧用CurrentThread.Name来统一标识日志记录

    ▄︻┻┳═一Agenda: ▄︻┻┳═一巧用CurrentThread.Name来统一标识日志记录 ▄︻┻┳═一巧用CurrentThread.Name来统一标识日志记录(续) ▄︻┻┳═一巧用Cur ...

  6. C# 基于DocumentFormat.OpenXml的数据导出到Excel

    using DocumentFormat.OpenXml; using DocumentFormat.OpenXml.Packaging; using DocumentFormat.OpenXml.S ...

  7. java中，null值可以被强制转换为任何类型

    java中,null值可以被强制转换为任何类型

  8. (转)Hashtable与ConcurrentHashMap区别

    ConcurrentHashMap融合了hashtable和hashmap二者的优势. hashtable是做了同步的,hashmap未考虑同步.所以hashmap在单线程情况下效率较高.hashta ...

  9. ling join 报错The specified LINQ expression contains references to queries that are associated with different cont

    The specified LINQ expression contains references to queries that are associated with different cont ...

  10. Sitecore标准模板字段

    在Sitecore中,数据模板定义数据类型.数据模板可以包含任意数量的节,其中每个节可视地分组一些字段.Sitecore标准模板为大多数其他数据模板定义了基本模板./ sitecore / templ ...