Index.html
<html>
<title></title>
<head>
<!-- Import Vue library -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<li v-for="msg in json">
{{msg}}
</li>
<input v-model="text"/>
<button @click="DisplayData">Query</button>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js
var app = new Vue({
el: "#app",
data: {
text: "",
json: null
},
methods: {
DisplayData: function () {
if (this.text)
{
fetch("https://api.github.com/users/" + this.text)
.then(r => r.json())
.then(json => { this.json = json; });
}
}
}
});
<html>
<title></title>
<head>
<!-- Import Vue library -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<li v-for="msg in json">
{{msg}}
</li>
<input v-model="text"/>
<button @click="DisplayData">Query</button>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js
var app = new Vue({
el: "#app",
data: {
text: "",
json: null
},
methods: {
DisplayData: function () {
if (this.text)
{
fetch("https://api.github.com/users/" + this.text)
.then(r => r.json())
.then(json => { this.json = json; });
}
}
}
});
No comments:
Post a Comment