list vue 删除后页面渲染_浅谈Vue项目实战（页面渲染+事件绑定）

页面渲染

vue是不会去操作dom节点，是有数据去操控节点，在js文件数据都在data里

*js代码片*

export default {

data() {

return {

formInline: {

user: 'admin',

region: 'shanghai'

}

*vue代码片*

*下面的标签是使用element ui搭建页面，和vue没毛关系，当成一般标签*

import listJS from './list.js'; //引入上面的js文件

export default listJS; //在把它输出，便可以渲染页面

vue数据渲染不只有这种方法，这是适合项目使用

渲染数据的方式个人经验

v-modle="formInline.name" 文本框渲染值

v-html="formInline.name" 一般标签渲染

等

{{="formInline.name"}} 一般标签渲染

等

v-for 渲染列表

v-bind:value 绑定value属性

v-on:click 或者@click click事件(两种写法)

v-modle:trim v-modle修饰符，去掉空格

//例如渲染list

list:[

{name:"zhang",age:"20",completed:true},

{name:"lisi",age:"21",completed:true},

{name:"longwu",age:"23",completed:true},

{name:"wangqi",age:"24",completed:true},

{name:"shang",age:"25",completed:true}

]

编辑

item就是每一列数据，index索引值，在项目中编辑，删除使用。

数据渲染差不多就这样，在看看钩子函数

*js文件*

export default{

//数据

data(){

return {

dialogFormVisible: false,

form: {

id:"1",

name: 'admin',

region: 'beijing'

}

//事件方法

methods :{

editItem(index){

this.list[index].completed=false;

}

//挂载到实例之后加载，个人理解初始化渲染页面这里可以调用方法

mounted() {

this.editItem(); //这样挂载后这个方法会被直接调用。

}

web学习交流群：362513833

list vue 删除后页面渲染_浅谈Vue项目实战（页面渲染+事件绑定）相关推荐

vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析成对出现:provide和inject是成对出现的作用:用于父组件向子孙组件传递数据使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...
vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
java 定时任务怎么关闭_浅谈springboot项目中定时任务如何优雅退出
在一个springboot项目中需要跑定时任务处理批数据时,突然有个Kill命令或者一个Ctrl+C的命令,此时我们需要当批数据处理完毕后才允许定时任务关闭,也就是当定时任务结束时才允许Kill命令生 ...
休眠后gpio状态_浅谈Digi XBee模块的休眠模式
浅谈Digi XBee模块的休眠模式 2020-3-25 Digi XBee S2C模块,如果仅连接电源线可以测得,在待机情况下,大约是10.5mA左右的电流,在休眠时的功耗可以低到0.5uA.可以知 ...
h5活动是什么意思_浅谈什么是H5页面，怎么制作h5页面
来源|活动盒子-APP活动运营工具(huodonghezi.com) 我们经常在社交平台都可以看到很多h5页面活动,这些h5活动页面不仅做的炫酷,而且还有非常好的营销推广效果.那么,怎么制作h5页面呢 ...
微信小程序页面栈_浅谈下微信小程序中的路由(页面跳转、返回、刷新、页面栈)...
什么是小程序里的"路由"?路由器吗?蒙蔽?好吧,在WEB应用中它其实就是分组数据包从源到目的地时,决定端到端路径的网络范围的进程:在小程序里就是设置页面的跳转,返回,自动刷新等一些 ...
vuex中的值变化页面重新渲染_浅谈浏览器的渲染过程，重绘与回流
浏览器的渲染过程首先,我们先来了解一下浏览器的渲染过程是什么样的,也就是说浏览器把一堆代码呈现到页面上的过程是什么样子的,浏览器采用流式布局模型(Flow Bsaed Layout),根据下图,我们 ...

list vue 删除后页面渲染_浅谈Vue项目实战（页面渲染+事件绑定）

list vue 删除后页面渲染_浅谈Vue项目实战（页面渲染+事件绑定）相关推荐

最新文章

热门文章