在Vue里 有好几种数据渲染的方法及相关指令 下面将一一介绍： 插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义： 由于插值表达式的语法是{{}} 像是一撇胡子 因而也被称为mustache胡子表达式 插值表达式存在闪烁的问题 此时 可添加v-cloak属性 以解决插值表达式{{}}闪烁的问题 然后给v-clock添加一个css样式即可： 这样 在网速卡的情况下 插值表达式不会被显示出来 会被display:none隐藏 等页面加载完了直接显示内容 v-text的效果和{{}}插值表达式差不多 都是显示数据 v-text和插值表达式的区别是： 但插值表达式也有其优点： 因为插值表达式只会替换自己的占位符 不会影响其它内容 若要渲染HTML标签 v-text是不行的 因为v-text并不会转义Html标签 此时 需要用到v-html：
一、插值表达式
通过Vue提供的指令即可很方便地将数据渲染到页面上 无需手动操作DOM元素了<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入Vue --> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p>{{msg}}</p> </div> <script> var vm=new Vue({ el:"#app", data:{ msg:"Hello Vue!" } }) </script> </body> </html>
二、v-clock
在网速卡的情况下 加载插值表达式时 页面会显示{{xxx}} 当页面加载好了才会显示内容 影响美观<div id="app"> <!-- 解决插值表达式闪烁的问题 --> <p v-cloak>{{msg}}</p> </div> <style> [v-cloak] { display: none; } </style>
三、v-text
<div id="app"> <h4 v-text="msg"></h4> </div> <script> var vm=new Vue({ el:"#app", data:{ msg:"Hello Vue!" } }) </script>
v-text不会有闪烁问题
因为并没有在里面写表达式 而是加在属性里
插值表达式可以在前后加上任意内容：
例如：<p v-cloak>---{{msg}}---</p>
而v-text会覆盖元素中原本的内容
四、v-html
这会导致Html标签被原原本本的显示到页面上
类似于Thymeleaf的th:utext属性 会对Html标签进行转义<!-- v-html可以转义html标签 --> <div v-html="msg"></div> <script> var vm=new Vue({ el:"#app", data:{ msg:"Hello Vue!" } }) </script>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
