Vue基礎 列表渲染

2021-10-04 23:39:23 字數 1227 閱讀 1102

<

!doctype html>

"utf-8"

>

列表渲染<

/title>

"../js/vue.js"

>

<

/script>

<

/head>

"demo"

>

name:

="text" v-model=

"pname"

/>

>

age:

="text" v-model=

"page"

/>

v-for 遍歷陣列<

/h2>

for=

"(p,index) in persons"

:key=

"index"

>}.

}----}

-"updatep(index)"

>更新<

/button>

-"deletep(index)"

>刪除<

/button>

<

/li>

<

/ul>

v-for 遍歷物件<

/h2>

for=

"attr in persons[1]"

:key>

}<

/li>

<

!--乙個引數即物件屬性的值,兩個引數第二個屬性為屬性名,三個引數,第三個 引數即索引值 --

>

for=

"(attr,name) in persons[1]"

:key>}--

-}<

/li>

for=

"(attr,name,index) in persons[1]"

:key>}-

}---}

<

/li>

<

/ul>

<

/div>

<

/body>

newvue(,

,,],

pname:

'test'

, page:20}

, methods:

,updatep

(index))}

}})<

/script>

<

/html>

vue 列表渲染

列表渲染 v for指令 v for in data 如果需要 索引 index v for item,index in data 物件 v for index,item,key in obj 例子 總結 v for 最多可以有三個引數 格式v for index,item,key in data ...

vue列表渲染

v for更新渲染過的元素列表,預設使用復用策略,這個預設的模式是高效的,但是只適用於不依賴子元件狀態或臨時 dom 狀態 例如 表單輸入值 的列表渲染輸出 迭代物件屬性有三個引數,value,name,index 使用陣列的變異方法改變陣列觸發檢視更新 使用非變異方法返回乙個新陣列來替換原陣列時,...

Vue列表渲染

我們用v for指令根據一組陣列的選項列表進行渲染。v for指令需要使用item in items形式的語法 var vm new vue 在v for塊中,我們擁有對父作用域屬性的完全訪問許可權。v for還支援乙個可選的第二個引數為當前項的索引。var vm new vue 也可以用of替代i...