vue的易错点合集

2021-08-15 21:04:54 阅读：214 来源： 互联网

标签：易错 vue return 亲亲合集 app pageindex res data

关于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,return,亲亲,合集,app,pageindex,res,data
来源： https://www.cnblogs.com/Ji0409/p/15144696.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue的易错点合集