这里是动态页面,静态页面用ajax获取数据也可以实现
<body>
<div class="div-main">
<div th:replace="nav :: nav"></div>
<div id="data">
<div>
<ul>
<block v-for="item in users" :user="item"></block>
</ul>
</div>
</div>
</div>
</body>
<script th:inline="javascript">
var data=[[${users}]];
// data = JSON.parse(data);用jsonArray时要转换,如果返回的是list则不用
console.log(data);
$(".active").removeClass("active").unbind();
$("#vue").addClass("active").unbind();
//组件要放vue前面,而且组件里面代码只能调用该组件的methods
Vue.component('block', {
props:['user'],
template: '<li v-if="name(user.name)">{{user.name}}</li>',
methods:{
to: function(href) {
location.href = href;
},
name:function (name) {
return name % 2 === 0
}
}
})
//vue用组件时data要用function () {return{数据}}格式
var doctorSharePage = new Vue({
el: '#data',
data:function () {
return {
users:data//可以用ajax获取该数据
}
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})
</script>
controller
@GetMapping("vue")
private String vue(Model model) {
/*JSONArray jsonArray = new JSONArray();
for (int i=0;i<25;i++) {
JSONObject json = new JSONObject();
json.element("name",i+"");
jsonArray.add(json);
}
model.addAttribute("users", jsonArray.toString());*//用该方式返回时前台需要用data = JSON.parse(data)
List<User> users=new ArrayList<>();
for (int i=0;i<25;i++) {
User user=new User();
user.setName(i+"");
users.add(user);
}
model.addAttribute("users", users);
return "页面地址";
}
`