插值操作
个人博客
Vue系列
上一篇:01-Vue的初体验
下一篇:03-Vue的动态绑定属性
Vue的插值操作
什么是插值操作
我们紧接上一篇的例子:
在网页的显示中,vue中的message插入到了{{message}}中,这就是我们所说的插值操作。
Mustache插值
这种插值操作我们已经见过了,几乎是最常用的一种,也就是用{{}}来进行插值。
{{}}中是一个变量时
{{}}中的可以是一个变量,如:
{{message}}中的message是data中的message变量。
{{}}中是一个表达式时
{{}}中也可以是一个表达式,如:
{{}}中是一个表达式,将lastName字符串和firstName字符串进行了拼接,结果如下:
如果我们希望lastName和firstName中间有一个空格,可以通过lastName + ’ ’ + firstName进行拼接。
结果如下:
{{}}中是一个字符串时
{{}}中也可以是一个字符串,如下:
这里{{‘lastName’}}这个lastName用单引号(或者双引号)括起来就成了一个字符串,它不再是一个变量,所以显示时应该是lastName,而不是lastName这个变量的值,结果如下:
我们可以看到,这里显示的不是lastName变量的值’wang’,而是’lastName’这个字符串。
v-once的使用
先来看这个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
message: "hello world",
lastName: "wang",
firstName: "yuyong",
},
});
</script>
</html>
如果我们改变vue对象中的message的值,那么界面也会跟着变化。
如果我希望message第一次的值绑定给界面,以后第二次再更改它的值时它不会再改变,我们可以用v-once,修改代码如下:
这里给h1标签添加了v-once,然后我们在尝试改变vue.message的值:
这里可以看到,h1标签中的{{message}}不会再因为vue.message的值改变而改变,也就是它只会再第一次赋值时进行改变。
v-html的使用
下面我们给出这样一个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{url}}</h1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
message: "hello world",
lastName: "wang",
firstName: "yuyong",
url:"<a href='https://www.boycharse.top'>Yong's blog</a>"
},
});
</script>
</html>
这里的url对应的是一个字符串:“Yong’s blog”,我们可以很容易的猜想到结果:
{{url}}忠实的展示了这个字符串。但我们希望网页将它当成一个a标签来解析,而不是字符串,这时候我们可以使用v-html。
更改如下代码:
这样子,vue就会将它当成一个html标签来解析
v-text的使用
v-text是一个很少使用的指令,它的作用和我们一开始讲的mustache类似。如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-text="message"></h1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
message: "hello world",
lastName: "wang",
firstName: "yuyong",
url: "<a href='https://www.boycharse.top'>Yong's blog</a>",
},
});
</script>
</html>
结果如下:
mustache和v-text的区别
我们来看下面的这个例子:
可以看到,v-text直接覆盖了h1标签内的内容,而mustache只替换了{{}}的内容。
总结
这一篇主要讲了mustache,v-once,v-html,v-text的使用,其中mustache插值操作是最常用的,其它较为少用。