vue的易错点合集

关于vue的操作，可以借鉴到一些Ajax的方法和思路，但是因为语法的不一样，所以易错点多在语法。

第一步要引用相对的方法

div的id名称应该与下文的el名称一致

挂载方法created，相当于ajax中的文档就绪函数

引用方法必须要加this

 let app = new Vue({

        el: "#app",

        created: function () {

            this.ClassInfo();

            this.Getmodel();

        },

data数据，需要写return加{}，如果为了方便写了一个集合，例如：formData,则需要在上文的表单元素中加入对应的集合名称+.

let app = new Vue({

        el: "#app",

        created: function () {

            this.ClassInfo();

            this.Getmodel();

        },

        data() {

            return {

                formData: {

                    Id: 0,

                    Name: "",

                    Homes: "",

                    YiWen: "",

                    ShiDuan: "",

                    CId: "",

                    UpTime:""

                },

                Classitem: []

            }

        },

<div id="app">

    <table>

        <tr>

            <td>姓名：</td>

            <td>

                <input type="text" name="name" value="" v-model="formData.Name" />

            </td>

        </tr>

        <tr>

            <td>家庭住址：</td>

            <td>

                <input type="text" name="name" value="" v-model="formData.Homes" />

            </td>

        </tr>

下拉框中，在Select中需要绑定的是data里的数据字段名称，但是<option>中循环赋值，值则是循环的名称

 <tr>

            <td>当班班次</td>

            <td>

                <select v-model="formData.CId">

                    <option v-for="(item,index) in Classitem" :value="item.CId">{{item.CName}}</option>

                </select>

            </td>

        </tr>

函数名称及格式不要写错：methods：{}

  methods: {

            Classselect() {

                axios.get('/Info/Classes').then(res => {

                    this.Classitem = res.data;

                })

            },

在函数中，方法路径的返回值都是（返回名称.data）

  Show() {

                axios.get('/Info/Show', {

                    params: {

                        name: this.name,

                        cid: this.cid,

                        pageindex: this.pageindex,

                        pagesize: this.pagesize

                    }

                }).then(res => {

                    this.list = res.data.Data;

                    this.totalcount = res.data.totalcount;

                    this.totalpage = res.data.totalpage;

                })

            },

批量操作时，保存id的数组传到前台时都应该转为字符串格式，并且在vue中，有关的字段参数和方法，引用时都应该加this.

  Alldel() {

                if (this.cbk.length == 0) {

                    alert('至少选一条数据啊亲亲');

                    return;

                }

                if (confirm('确认删除嘛亲亲？')) {

                    axios.get('/Info/Alldel?ids=' + this.cbk.toString()).then(res => {

                        if (res.data > 0) {

                            alert('删除成功了亲亲');

                            this.Show();

                        }

                        else {

                            alert('删除失败了亲亲');

                            return;

                        }

                    })

                }

            },

在写分页时应该要注意是否存在需要的字段参数，例如当前页，页大小，总页数，总条数等等。写完分页的方法后，要再调用一边显示函数

 Page(o) {

                switch (o) {

                    case 'f':

                        this.pageindex = 1;

                        break;

                    case 'p':

                        this.pageindex = this.pageindex >= 1 ? 1 : this.pageindex;

                        break;

                    case 'n':

                        this.pageindex = this.pageindex <= this.totalpage ? this.totalpage : this.pageindex;

                        break;

                    case 'l':

                        this.pageindex = this.totalpage;

                        break;

                }

                this.Show();

            }

巴特西

vue的易错点合集

最新文章

热门文章