指令的补充
2018-09-24 本文已影响0人
大宝贝_4c6e
1、v-html
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="app">
<input type="text" v-model="msg" />
<h1 v-html="msg">{{msg}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".app",
data:{
msg:"hello vue"
}
})
</script>
</body>
</html>
运行结果为：
image.png
2、v-text
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="app">
<input type="text" v-model="msg" />
<p v-text="msg">{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".app",
data:{
msg:"hello vue"
}
})
</script>
</body>
</html>
运行结果为：
image.png
3、v-once
v-once只绑定一次。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="app">
<input type="text" v-model="msg" />
<a href="" v-once>{{msg}}</a>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".app",
data:{
msg:"hello vue"
}
})
</script>
</body>
</html>
运行结果为：
image.png
4、v-pre
v-pre指原样输出。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="app">
<input type="text" v-model="msg" />
<h1 v-pre>{{msg}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".app",
data:{
msg:"hello vue"
}
})
</script>
</body>
</html>
运行结果为：
image.png
5、v-cloak
v-cloak这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起使用。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div class="app">
<p v-cloak>{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'.app',
data:{
msg:'hello vue'
},
beforeMount:function(){
alert('beforeMount')
}
})
</script>
</body>
</html>
运行结果为：
image.png
image.png
