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