松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue2.x从零开始 › {{}}的使用

{{}}的使用

迦娜王
3年前Vue2.x从零开始
1,113 0 1

{{}}的使用

在开始之前,我们先把之前的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>
1
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
搭建第一个Vue工程
上一篇
v-text的使用
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • {{}}的使用
  • 文本输出
  • 对象输出
1
相关文章
router的使用
watch属性的使用
computed属性的使用
vuex的简单使用
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 1
  • 0
  • Top