vue开发实例
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><div id="app"><table>...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
<table>
<tr v-for="item in items">
<td>{{ item.id }}</td>
<td>{{ item.title }}</td>
<td>{{ item.content }}</td>
<td>{{ item.createTime | formatDate }}</td>
</tr>
</table>
<div v-html="rawHtml"></div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
//vm实例
var vm = new Vue({
el: '#app', //挂载元素
data: {
items: {},
rawHtml:"<h1 style='color:red'>123</h1>"
},
filters: {
formatDate(val) {
if (val != null) {
var date = new Date(val);
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}
}
}
});
$(function(){
$.ajax({
type: "POST",
contentType: "application/json",
url: "/activeList/getAll",
dataType: 'json',
cache: false,
timeout: 2000,
success: function (data) {
vm.items=data;
},
error: function (e) {
alert("出错了");
}
});
})
</script>
</html>
更多推荐
所有评论(0)