解决页面加载时显示{{}}问题-v-cloak,v-text 解决处理文本里边包含标签关键字--v-html

1.样式隐藏

<style>

[v-cloak] {

display: none;//隐藏属性

}

</style>

<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->

    <p v-cloak>++++++++ {{ msg }} ----------</p>

2.用v-text

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

<!-- 默认 v-text 是没有闪烁问题的 -->

<!-- v-text会覆盖元素中原本的内容,但是 插值表达式  只会替换自己的这个占位符,不会把 整个元素的内容清空 -->

两者的区别:

v-cloak会出现标签里的内容,v-text会替换掉标签包裹的原有内容,所以不会出现===

<div v-html="msg2">1212112</div>

<script>
    var vm = new Vue({
      el: ‘#app‘,
      data: {
        msg: ‘123‘,
        msg2: ‘<h1>哈哈,我是一个大大的H1, 我大,我骄傲</h1>‘,
        mytitle: ‘这是一个自己定义的title‘
      },
      methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert(‘Hello‘)
        }
      }
    })

  

原文地址:https://www.cnblogs.com/fdxjava/p/11579312.html

时间: 2024-08-01 04:31:48

解决页面加载时显示{{}}问题-v-cloak,v-text 解决处理文本里边包含标签关键字--v-html的相关文章

页面加载时遮罩效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>页面加载时遮罩效果</title>        <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>      

页面加载时让其显示笼罩层与加载等待图片

页面加载时让其显示笼罩层与加载等待图片(结局比较完美,过程很坎坷,所以一定总结整理下,备用): 用了ajax异步,是因为js内容不能即时的显示出来,因为js是单线程,要把队列中的任务执行完后才会执行刚才对js的处理 要用beforeSend,complete的时候必须要用ajax异步 beforeSend: function () {},//程序一开始便会执行该函数,使用该方法必须使用异步ajax complete: function () {},//complete在success或error

Javascript在页面加载时的执行顺序【转】

一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属性制定外部的js文件 放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p> 作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="

ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失

代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLength="10" Width="166px" Text="请输入用户名" OnFocus="javascript:if(this.value=='请输入用户名') {this.value='';this.style.color='#000

JSFF或JSF页面加载时触发JavaScript之方法

现象一 最近在项目中遇到这么一个问题,有些页面元素是在页面加载时通过JavaScript动态渲染而成.当生成这些元素的JavaScript脚本被放置于JSPX文件中时,界面渲染没有问题.但是当我们把生成这些页面元素的JS脚本放到JSFF时就会发现,JS脚本只在我们进入TaskFlow的第一个View被执行了,进入后续View时,后续View的JS代码加载和执行. 分析 通过分析,发现当进入TaskFlow的第一个View时,第一个View中通过<af:resource/>标签引入的JS代码能成

aspx页面加载时清掉缓存

今天遇到一个问题,账户退出后登陆其他账户仍然显示上个账户用户名, 用了session.clear();session.abandon();context.Session["姓名"] = "";都不管用 最后在aspx页面加载时加上下面代码就可以了 Response.Expires = 0;Response.Cache.SetNoStore(); Response.AppendHeader("Pragma", "no-cache"

如何自动在html页面加载时动态改变div等元素的高度和宽度

这里需要用到jquery + css.原理是在页面加载时用javascript去动态改变一个class的高度和宽度.这样结合javascript能动态获取浏览器/页面的高度和宽度,从而使得div能动态的跟随浏览页面的大小变化而变化并且不影响高宽比.下面的代码创建一个手机页面,每一行三个图片分占33%,每个图片div的高和宽会随着浏览器的大小变化而自适应. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"

页面加载时的 Loading 效果

//页面加载时的 Loading 效果 $(window).load(function () { window.setTimeout(function () { $('body').removeClass('loading'); }, 1000); }); 上面的JS部分: HTML 部分 <body class="loading"> <div class="main"> </div></body> css .load

jquery 页面加载时获取图片高度

$(function () { $(window).load(function(){ alert($('img').height()); }); }); jquery 页面加载时获取图片高度