Spring Boot中vue组件使用

这里是动态页面，静态页面用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 "页面地址";
    }

Spring Boot中vue组件使用

这里是动态页面，静态页面用ajax获取数据也可以实现

controller

猜你喜欢