2018-09-17 v-的其他指令

  • v-text 输出渲染后的值
  • v-html 输出解析HTML元素后的值
  • v-once 只绑定一次
  • v-pre 原样输出
  • v-cloak 渲染完之后才显示
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="msg">
    <p v-text="msg">{{msg}}</p>
    <h1 v-html="msg">{{msg}}</h1>
    <a href="#" v-once>{{msg}}</a> <br>
    <a href="#" v-pre>{{msg}}</a>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"你好"
        }
    })
</script>
</body>
</html>
v-cloak的使用
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app">
    <p v-cloak="msg">{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:"你好"
        },
        beforeMount:function(){
            alert("警告")
        }
    })
</script>
</body>
</html>
QW.png

防止将{{message}}类似的输出到页面
配合css中display:none 来隐藏标签
点击确定之后页面才会显示值为 你好

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,276评论 0 25
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,758评论 1 45
  • 在网上查了些资料,该类控件虽然资料很多,但是都不具体,或者说或多或少都是有些坑的。经过两天的整理,最终得到一个相对...
    Brian512阅读 415评论 0 1
  • 昨晚小班课老师提问最令自己尊敬的人,我想到的是高翻张璐,专业干练、风采迷人,记得当年做意象,我对镜子里穿正装的自己...
    Beatrans阅读 348评论 0 0