Vue使用大括号作为最基础的文本插值方法,他会自动地将双向绑定的数据实时显示出来。
实例:可以使{{}}中的内容根据时间实时变化。
<!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>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
{{value}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
value:999
}
})
</script>
</body>
</html>
插入一个link标签
<!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>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="link_test">
<span v-html="link"></span>
</div>
<script>
var app= new Vue({
el:'#link_test',
data:{
link:'<a href="http://www.baidu.com">这是一个链接</a>'
}
})
</script>
</body>
</html>
如果想显示{{}}标签,并不替换需要使用v-pre跳过这个元素和他的子元素的编译过程。
<!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>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
{{num/10}}
{{isTrue?'yes':'no'}}
{{text.split(',').reverse()}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
num:10,
isTrue:false,
text:'123,sdasd'
}
})
</script>
</body>
</html>