插值语法
2020-07-07 本文已影响0人
瑟闻风倾
(1) Mustache语法(双大括号语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{message}}</div>
</div>
</body>
<script type="text/javascript" src="vue1026.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:'你好',
}
});
</script>
</html>
不常用指令（仅用于特殊场景）
(2) v-once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-once>{{message}}</div>
</div>
</body>
<script type="text/javascript" src="vue1026.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:'你好',
}
});
</script>
</html>
v-once：元素和组件仅渲染一次，不会随着数据的变化而变化。
(3) v-text 和 v-html
备注： v-text 和 v-html 都可解决差值表达式闪值问题。
- eg1： 类似Mastache语法，但v-text会覆盖后面的内容，使用不灵活
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{tip}}，来自课程</div>
<div v-text="tip">，来自课程</div>
</div>
</body>
<script type="text/javascript" src="vue1026.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
tip:'为了展示差值表达式闪烁问题暂时将vue.js脚本导入页面下方（即不在head位置处导入）'
}
});
</script>
</html>
- eg2：v-html 将string格式的html标签解析出来并进行渲染显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{url}}</div>
<div v-html="url"></div>
</div>
</body>
<script type="text/javascript" src="vue1026.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
url:'<a href="http://www.baidu.com">百度一下</a>',
}
});
</script>
</html>
v-html.png
(4) v-pre（不希望解析，原封不动显示）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<div v-pre>{{message}}</div>
</div>
</body>
<script type="text/javascript" src="vue1026.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:'你好',
}
});
</script>
</html>
(5) v-cloak
v-cloak：vue解析前，属性为v-cloak的div不显示；vue解析后，div没有了v-cloak属性，此时div显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<span v-cloak>{{name}}</span>
</div>
</body>
<script type="text/javascript" src="vue1026.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"利用v-cloak和css规则[v-cloak]{display: none}也能解决差值表达式闪值问题"
}
});
</script>
</html>
备注：利用v-cloak和css规则[v-cloak]{display: none}也能解决差值表达式闪值问题。
