示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue测试</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="username" v-model="username">
{{url}}
<a v-bind:href="url">点击跳转1</a>
<a :href="url">点击跳转2</a>
<input type="button" value="点击" @click="show1()">
<div v-if="status==1">状态1</div>
<div v-if="status==2">状态2</div>
<input type="text" name="status" v-model="status">
<div v-show="status==1">test</div>
<div v-for="domain in arrays">
<li>{{domain}}</li>
</div>
</div>
<script>
new Vue({
el:"#app",
data(){
return {
username: 'mytest',
url:'http://localhost:8080/test',
status: 1,
arrays:['t1','t2','t3']
}
},
methods:{
show1(){
alert("cest")
},
show2(){
}
}
});
</script>
</body>
</html>
示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vueindex</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!--发送ajax引用-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<colgroup>
<col width="100">
<col width="200">
<col width="100">
<col width="200">
</colgroup>
</thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td><a>删除</a>></td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
users: []
}
},
//页面加载完毕执行
mounted() {
var ths = this;
axios({
method: 'GET',
url: 'http://localhost:8081/mytest//user/findAll'
}).then(function (result) {
var code = result.status;
var data = result.data;
if (code == "200") {
ths.users = data;
}
});
},
});
</script>
</body>
</html>
联系客服
