vue操作,显示数据

vue操作,显示数据

1.操作页面上的数据

组件中的内容

<template>
    <div class="about">
        <h1>这是课程页面</h1>
        <button @click="test">点我</button>
        <p><button @click="data1">得数据</button></p>
        <p>{{course}}</p>
    </div>
</template>

操作组件中的数据

//页面上的{{course}}数据
//在script中操作
<script>
    export default {
        //data为操作数据的字段
        data:function(){
            return {
                course:['treadf']
            }
        },
        //methods为操作方法的字段
        methods:{
            test:function () {
                alert('test')
            },
            data1:function () {
                let _this = this
                this.$axios.request({
                    url:'http://127.0.0.1:8001/test/',
                    method:'get'
                }).then(function (response) {
                    _this.course=response.data
                })

            }

        }
    }
</script>

转载于:https://www.cnblogs.com/jianhaozhou/p/10156345.html