{{}}的使用
{{}}的使用
在开始之前,我们先把之前的my-project,清理一下,让他更加干净。把App.vue修改为如下代码:
<template>
<div></div>
</template>
<script>
export default {
}
</script>
<style>
</style>
OK,现在网页上一片空白了,非常干净。
文本输出
{{}}称之为Mustache用法,这是最为基本的数据绑定方法。在之前出现的代码中,我们已经在使用它了。我们不厌其烦的复制过来这部分代码:
<template>
<div>{{val}}<div>
</template>
<script>
export default {
data(){
return {
val:'text'
}
}
}
</script>
任何对val的修改,都会反映到div中。比如我们在mounted中编写
this.val = '你好vue'
那么div中的内容变成你好vue
。
对象输出
有时候,我们可能需要把一个json对象输出到页面上,并且希望它是格式化的。在vue中通过{{}}进行输出最为简单不过了。
<template>
<pre>{{json}}<pre>
</template>
<script>
export default {
data(){
return {
json:{
"name":"张珊",
"age":25
}
}
}
}
</script>
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。