`
arpenker
  • 浏览: 332074 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

vue对一个json进行取值

    博客分类：
  • vue
vue 
阅读更多
如何使用vue对象，取一个json里各个对象的值。并显示出来。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue3(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 它们引用相同的对象！
    document.write(vm.site === data.site) // true
document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "Runoob"
    document.write(data.site + "<br>") // Runoob

    // ……反之亦然
    data.alexa = 1234
    document.write(vm.alexa) // 1234
    </script>
</body>
</html>


撸一下逻辑。

1.引入js.
2.先定义一个json数据串。
3.new  一个vue对象。并且把JSON数据串赋给data对象。
然后就可以使用vue对象取它下面的各个值。并且输出了 。
分享到：
| vue
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics