经久不更博客.今天简单点
v-html
<script src="js/vue.js"></script>
<div id="app">
<h1>{{msg}}</h1>
<h1 v-html="msg"></h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:`来自<<<a href="javascript:;">新华社</a>>>的消息`
}
})
</script>
效果对比是这样的.
v-cloak
<script src="js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<h1 v-cloak>用户名:{{uname}}</h1>
<h1 v-cloak>积分{{score}}</h1>
</div>
<script>
setInterval(function(){
var vm=new Vue({
el:"#app",
data:{
uname:"dingding",
score:3000
}
})
},2000)
</script>
显示效果:2s后显示以下页面
v-text
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-text="`用户名:{{uname}}`"></h1>
<h1 v-text="">积分:<span v-text="score"></span></h1>
</div>
<script>
setInterval(function(){
var vm=new Vue({
el:"#app",
data:{
uname:"dingding",
score:3000
}
})
},2000)
0s时
2s时
4s时
v-once
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>当前系统时间:{{time}}</h1>
<h1 v-once>上线时间:{{time}}</h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
time:new Date().toString()
}
})
setInterval(function(){
vm.time=new Date().toString()
},1000)
</script>
效果你应该猜到了,第一行的时间是可以流动的,第二行是不变的
还有v-pre什么的…下次再写吧.
