Spring Boot中vue元件使用
阿新 • • 發佈：2018-12-10
###這裡是動態頁面，靜態頁面用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 "頁面地址"; }
`