vue实现表格的增删改查,vue删除或新增更新数据

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现表单数据的增删改功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件实现表单数据增删改功能的具体代码，供大家参考，具体内容如下

　　图示如下：

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　meta name= viewport content= width=device-width，initial-scale=1.0

　　meta http-equiv= X-UA-Compatible content= ie=edge

　　标题会员等级优惠/标题

　　脚本src= https://libs。百度一下。com/jquery/1。8 .3/jquery。量滴js /脚本

　　脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本

　　脚本

　　//rem适配的js 750的设计图真实用7.5雷姆表示

　　（函数(){

　　让窗口中的resizeEvt=orientationchange ？方向改变“:”调整大小，

　　doc=document.documentElement

　　函数changeFontSize() {

　　let clientWidth=doc.offsetWidth，

　　比例尺=客户端宽度/750；

　　医生。风格。font size=scale * 100 px

　　}

　　//监听窗口变化或横屏时

　　窗户。addevent监听器(调整evt大小，更改fontsize)；

　　//加载页面触发

　　文档。addevent侦听器( DOMContentLoaded ，change fontsize)；

　　})();

　　/脚本

　　风格

　　* {

　　边距：0;

　　填充：0;

　　}

　　李{

　　列表样式：无；

　　}

　　正文{

　　字体大小：0.32雷姆；

　　背景：# f 0 eff 5；

　　}

　　输入{

　　边框：无；

　　大纲：无；

　　}。德尔{

　　宽度：1雷姆；

　　行高：0.55雷姆；

　　背景：rgba(0，153，255，1)；

　　颜色：# fff

　　文本对齐：居中；

　　边框：无；

　　边框半径：0.1毫米；

　　左边距：0.2毫米；

　　}

　　/* 顶部信息*/。顶部{

　　/*宽度：100%;*/

　　/*身高：1.78雷姆；*/

　　背景：rgba(224，242，255，1)；

　　填充：0.2毫米

　　字体大小：0.3毫米；

　　颜色：# 0099FF

　　}。顶部p {

　　边距-底部：0.14毫米；

　　}

　　/* 切换栏*/。导航框{

　　行高：0.86雷姆；

　　显示器：flex

　　柔性包装：nowrap

　　背景：# fff

　　边距-底部：0.02毫米；

　　}。导航框李{

　　flex:1；

　　文本对齐：居中；

　　}。导航框李.主动{

　　背景：rgba(0，153，255，1)；

　　颜色：# fff

　　}

　　/* 第一项*/。nav1 {}。导航1 .bottom_btn {

　　行高：0.77雷姆；

　　背景：rgba(0，153，255，1)；

　　颜色：# fff

　　文本对齐：居中；

　　位置：固定；

　　底部：0;

　　左：0;

　　右：0;

　　}

　　/* 第一项的第一个盒子*/。导航1 .内容框1 {

　　显示器：flex

　　柔性包装：缠绕；

　　背景：# fff

　　填充：0.2里姆0 0.2里姆

　　边距-底部：0.2 RM

　　}。导航1 .内容框1。列表{

　　宽度：1.68雷姆；

　　行高：0.74雷姆；

　　文本对齐：居中；

　　背景：rgba(243，243，243，1)；

　　边框半径：0.1毫米；

　　右边距：0.12毫米；

　　边距-底部：0.2 RM

　　}。导航1 .内容。方框1。列表。活动{

　　背景：rgba(0，153，255，1)；

　　颜色：# fff

　　}。导航1 .内容框1。列表：第n种类型(4n) {

　　右边距：0;

　　}。导航1 .内容框1。添加成员{

　　字体大小：0.26雷姆；

　　颜色：rgba(160，214，255，1)；

　　}。导航1 .内容框1。添加成员add_ico {

　　/*右边距：0.007雷姆；*/

　　}。导航1 .concent .box2 { }。导航1 .内容框2。titele {

　　左填充：0.2红色；

　　行高：0.7雷姆；

　　背景：# fff

　　border-bottom: 1px solid rgba(205，205，205，1)；

　　}。导航1 .内容框2。信息chi _信息{

　　背景：# fff

　　填充：0.14雷姆0.2雷姆；

　　边距-底部：0.1毫米；

　　}。导航1 .内容框2。信息chi_infobold_text {

　　字体粗细：粗体；

　　颜色：rgba(51，51，51，1)；

　　边距-底部：0.22毫米；

　　}。导航1 .内容框2。信息chi_info1 {

　　填充-底部：0.3毫米；

　　}。导航1 .内容框2。信息chi_info1 .li_box {

　　字体大小：0.28雷姆；

　　}。导航1 .内容框2。信息chi_info1 .李_框.李{

　　显示器：flex

　　柔性包装：nowrap

　　边距-底部：0.2 RM

　　}。导航1 .内容框2。信息chi_info1 .李_框.李。伯爵1 {

　　框大小：边框-框；

　　宽度：1.2雷姆；

　　身高：0.56雷姆；

　　边框：1px实心rgba(0，153，255，1)；

　　保证金：0 0.2人民币；

　　左填充：0.1红色；

　　}。导航1 .内容框2。信息chi_info1 .添加条件{

　　文本对齐：居中；

　　颜色：rgba(0，153，255，1)；

　　字体大小：0.28雷姆；

　　边距-顶部：0.28雷姆；

　　}。导航1 .内容框2。信息chi_info1 .添加条件add_ico {

　　/*保证金：0.05雷姆；*/

　　}。导航1 .内容框2。信息chi_info1 .firm_btn {

　　显示器：flex

　　justify-content:flex-end；

　　}。导航1 .内容框2。信息chi_info1 .公司_btn .btn {

　　宽度：1.2雷姆；

　　行高：0.66雷姆；

　　文本对齐：居中；

　　背景：rgba(0，153，255，1)；

　　颜色：# fff

　　边框半径：0.33毫米；

　　}。导航1 .内容框2。信息chi_info2 {}。导航1 .内容框2。信息chi_info2 .iscount {}。导航1 .内容框2。信息chi_info2 .iscount .count1 {

　　框大小：边框-框；

　　宽度：1.2雷姆；

　　身高：0.56雷姆；

　　边框：1px实心rgba(0，153，255，1)；

　　保证金：0 0.2人民币；

　　左填充：0.1红色；

　　}。导航2 .信息{

　　填充：0.2毫米

　　背景：# fff

　　}。导航2 .信息。机顶盒。李{

　　显示器：flex

　　柔性包装：nowrap

　　边距-底部：0.38雷姆；

　　字体大小：0.28雷姆；

　　}。导航2 .信息。机顶盒。最后列表{

　　字体大小：0.3毫米；

　　字体粗细：粗体；

　　}。导航2 .信息。机顶盒。最后名单。左侧{

　　flex:1；

　　}。导航2 .信息。机顶盒。最后名单。右{

　　flex:1；

　　}。导航2 .信息。机顶盒。李。向左{}。导航2 .信息。机顶盒。李。右{

　　宽度：自动；

　　}。导航2 .信息。机顶盒。李输入1 {

　　框大小：边框-框；

　　左填充：0.1红色；

　　宽度：1.6雷姆；

　　身高：0.56雷姆；

　　边框：1px实心rgba(0，153，255，1)；

　　保证金：0 0.2人民币；

　　}。导航2 .信息。机顶盒。李输入2 {

　　框大小：边框-框；

　　左填充：0.1红色；

　　宽度：1.27雷姆；

　　身高：0.56雷姆；

　　边框：1px实心rgba(0，153，255，1)；

　　保证金：0 0.2人民币；

　　}。导航2 .信息。添加条件{

　　文本对齐：居中；

　　颜色：rgba(0，153，255，1)；

　　字体大小：0.28雷姆；

　　边距-顶部：0.28雷姆；

　　}。导航2 .信息。添加条件add_ico {

　　/*保证金：0.05雷姆；*/

　　}。导航2 .信息公司_btn {

　　显示器：flex

　　justify-content:flex-end；

　　}。导航2 .信息firm_btn .btn {

　　宽度：1.2雷姆；

　　行高：0.66雷姆；

　　文本对齐：居中；

　　背景：rgba(0，153，255，1)；

　　颜色：# fff

　　边框半径：0.33毫米；

　　}

　　/* 弹框*/。面具{

　　位置：固定；

　　宽度：100%;

　　左：0;

　　底部：0;

　　top:0；

　　背景：rgba(0，0，0，0.5)；

　　}。型号{

　　位置：固定；

　　宽度：5.06雷姆；

　　身高：3雷姆；

　　top:50%；

　　左：50%;

　　边框半径：20px

　　transform: translate(-50%，-50%)；

　　背景：# fff

　　}

　　/风格

　　/头

　　身体

　　div id=应用程序

　　div class=page

　　div class=top

　　p会员等级优惠/p

　　p1 .商户可根据不同等级会员设置相应的充值、购买优惠；/p

　　第2页.会员等级优惠生效设备：娃娃机、兑币机、售货机100元/人

　　/div

　　div class=nav_box

　　李：导航指数==0?活动: @ click= tab(0)选择会员等级/李

　　李：导航指数==1?活动: @ click= tab(1)添加会员等级/李

　　/div

　　div class= nav 1 v-show= nav _ index==0

　　div class=concent

　　div class=box1

　　Li class= list :class= default _ level index==index？活动":"。

　　级别_成员中的 v-for=(item，index :key= index @ click= choose(index，item.userLevelId)

　　{{item.userLevelName}}/li

　　Li class=列出添加成员 @ click= tab(1)

　　span class=add_ico /span

　　跨度会员等级/span

　　/李

　　/div

　　div class=box2

　　"太好了"优惠设置/p

　　div class=info

　　chi_info chi_info1

　　 bold_text 兑币机/娃娃机/p

　　div class=li_box

　　li class=li v-for=(item，index)in preferential :key= index

　　单笔充值满

　　输入 class= count 1 type= text name= id=

　　oninput=value=value.replace(/[^\d{1,}\.\d{1，}\d{1，}]/g，)

　　v-model=项。 userlevelpaymoney

　　元再送

　　输入 class= count 1 type= text name= id=

　　oninput=value=value.replace(/[^\d{1,}\.\d{1，}\d{1，}]/g，)

　　v-model=项。用户级别givingmoney

　　币

　　button class=del

　　@click=delConditions(index，item.userLevelDiscountId)删除/按钮

　　/李

　　/div

　　div class=添加条件 @ click=添加条件()

　　span class=add_ico /span

　　跨度添加优惠条件/span

　　/div

　　！- div class=firm_btn

　　div class=btn 确定/div

　　/div -

　　/div

　　chi_info chi_info2

　　 bold_text 售货机/p

　　div class=iscount

　　购买优惠折扣

　　input class= count 1 type= number name= id= v-model= discount min= 1

　　最大值=9.9 步长=0.01

　　折

　　/div

　　/div

　　/div

　　/div

　　/div

　　div class= kong style= height:0.77雷姆；宽度：100% /格

　　div class= bottom _ BTN @ click= save()保存设置/div

　　/div

　　v-show=nav_index==1

　　div class=info

　　div class=topbox

　　李最后一个名单

　　div class=left 会员等级名称/div

　　div class=右达到条件/div

　　/李

　　 li class=li v-for=(item，index)in add _ level _ members :key= index

　　div class=left

　　输入class= input 1 type= text v-model= item。用户级别名称/div

　　div class=右

　　累计消费

　　input class= input 2 type= text name= id= v-model= item。用户级别货币

　　value=value.replace(/[^\d{1,}\.\d{1，}\d{1，}]/g，)

　　元达到

　　button class= del @ click= delLevelMembers(nav _ index)

　　v-show=！ item.userLevelId 删除/按钮

　　/div

　　/李

　　/div

　　div class=添加条件 @ click= addLevelMembers()

　　span class=add_ico /span

　　跨度添加会员等级/span

　　/div

　　div class=firm_btn

　　div class=btn @click=addLevel()确定/div

　　/div

　　/div

　　/div

　　/div

　　/div

　　/body

　　脚本

　　var应用=新Vue({

　　埃尔： #app ，

　　数据：{

　　nav_index: 0，//默认的航行切换

　　级别成员：[],//可选择的数组{userLevelId: 1，userLevelName:普通，userLevelMoney: 20}

　　default_levelIndex: 0，//默认的会员等级第一个

　　userLevelId: 0，//默认的会员编号

　　优惠：[],//优惠数组

　　折扣： ,//设置的折扣0-9.9

　　add_level_members: []，//添加会员等级数组

　　model_userLevelDiscountId:" "，

　　model_userLevelIndex: 0

　　model_IsShow: false，

　　},

　　已安装(){

　　这个。getinfo()；

　　//这个。getinfo 1()；

　　},

　　方法：{

　　//切换标签

　　选项卡（索引){

　　让那个=这个；

　　that.nav _ index=index

　　that.getinfo() //重置会员数组

　　},

　　//选择会员等级显示不同的套餐

　　choose(index，userLevelId) {

　　让那个=这个；

　　that.default _ levelIndex=index

　　那个。用户级别id=用户级别id；

　　控制台。日志(用户级别id)；

　　那个。getinfo 1(用户级别id)；

　　},

　　//添加套餐

　　addconditions() {

　　让那个=这个；

　　//根据后台需要的值往数组里添加空数据

　　that.preferential.push({

　　userId: 80，

　　userLevelId: that.userLevelId，//会员等级编号

　　userLevelPayMoney: ，

　　userLevelGivingMoney: ，

　　用户级别购买折扣：""

　　});

　　},

　　//删除套餐

　　delConditions(index，userLevelDiscountId) {

　　让那个=这个；

　　那个。model _ userLevelDiscountId=userLevelDiscountId；

　　那个。模型_用户级索引=索引；

　　$.ajax({

　　类型： POST ，

　　URL:"/删除折扣"，

　　数据：{

　　userLevelDiscountId:那个。model _ userLevelDiscountId

　　},

　　成功：函数（数据){

　　if (data.code==100) {

　　console.log(删除成功)

　　那个。优惠。拼接(那个。模型_用户级索引，1)

　　}

　　}

　　});

　　},

　　//添加会员

　　addLevelMembers() {

　　让那个=这个；

　　that.add_level_members.push({

　　用户级别名称： ,

　　用户级别货币： ,

　　用户级别购买折扣：""

　　});

　　},

　　//删除会员

　　戴尔会员(索引){

　　让那个=这个；

　　那个。添加_级别_成员。拼接(索引，1)

　　},

　　//获取信息

　　getinfo() {

　　让那个=这个；

　　$.ajax({

　　键入：获取，

　　URL:"/getUserLevelList "，

　　成功：函数（数据){

　　if (data.code==100) {

　　那个。级别_成员=数据。延伸。列表；

　　那个。添加级别成员=数据。延伸。列表；

　　那个。用户级别id=数据。延伸。列表[0].用户级别Id

　　那个。getinfo 1(数据。延伸。列表[0]).用户级别Id)

　　}

　　}

　　});

　　},

　　getinfo1(userLevelId) {

　　让那个=这个；

　　$.ajax({

　　类型： POST ，

　　标题：{

　　"内容类型":"应用程序/json "

　　},

　　URL:"/getuserlevelbyevelid "，

　　数据：JSON.stringify({

　　用户id:“80后”，

　　用户级别Id:用户级别身份

　　}),

　　成功：函数（数据){

　　if (data.code==100) {

　　那个。优惠=数据。延伸。数据；//优惠数组

　　那个。折扣=数据。延伸。数据[0].userlevelbuydefit//折扣价格

　　}

　　}

　　});

　　},

　　//新增一个会员

　　addLevel() {

　　让那个=这个；

　　控制台。日志(那个。添加_级别_成员)；

　　对于(设I=0；我那个。添加_级别_成员。长度；i ) {

　　if (that.add_level_members[i].用户级金钱=== 那。添加级别成员[I]。userLevelName===) {

　　console.log(不能输入空值)

　　返回错误的

　　}

　　}

　　$.ajax({

　　类型： POST ，

　　标题：{

　　"内容类型":"应用程序/json "

　　},

　　URL:"/insertUserLevelList "，

　　数据：JSON。stringify(那个。添加级别成员)，

　　成功：函数（数据){

　　if (data.code==100) {

　　console.log(数据);

　　}

　　}

　　});

　　},

　　//保存设置按钮

　　save() {

　　让那个=这个；

　　console.log(that.preferential)

　　对于(设I=0；我。优先。长度；i ) {

　　优先的

　　.userLevelBuyDiscount = that.discount; //添加折扣字段

　　                    if (that.preferential[i].userLevelGivingMoney === that.preferential[i]

　　                        .userLevelPayMoney === that.preferential[i].userLevelBuyDiscount === ) {

　　                        console.log(不能输入空值)

　　                        return false;

　　                    }

　　                }

　　                $.ajax({

　　                    type: POST,

　　                    headers: {

　　                        "Content-Type": "application/json"

　　                    },

　　                    url: /updateDiscounts, //updateDiscountList

　　                    data: JSON.stringify(that.preferential),

　　                    success: function (data) {

　　                        if (data.code == "100") {

　　                            console.log(data);

　　                        }

　　                    }

　　                });

　　            }

　　        }

　　    })

　　</script>

　　</html>

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。