将Vue实例的变量显示到页面,方便实时查看Vue实例变量
文章目录页面效果代码注意参考文献页面效果代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../js/vue.min.js"></script></head&g
·
页面效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
<!--将Vue实例的变量显示到页面,方便实时查看Vue实例变量-->
<!--注意:放在Vue实例挂载的DOM元素内-->
<pre style="position: fixed; right: 0; top: 0; border: 1px solid;">
{{_data}}
</pre>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function () {
return this.site + " - 学的不仅是技术,更是梦想!";
}
}
})
</script>
</html>
注意
- 要将
{{_data}}
代码放在Vue实例挂载的DOM元素内; - Vue实例不可以通过JS动态添加新属性;
参考文献
[1] 菜鸟教程[DB_OL]. https://www.runoob.com/vue2/vue-start.html
更多推荐
已为社区贡献1条内容
所有评论(0)