vue基础之数据存储数据及迭代循环用法示例

本文实例讲述了某视频剪辑软件数据存储数据及迭代循环用法。分享给大家供大家参考，具体如下：

某视频剪辑软件数据里面存储数据

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net vue数据里面存储数据/title style/style脚本src=' http :3359 cdn。bootscs。com/Vue/2。4 .4/Vue。量滴js '/脚本脚本窗口。onload=function(){ new Vue({ El : ' body '、data:{ msg:'welcome vue '、msg2:12、msg3:true、arr:['apple '，' banana '，' orange '，' pear ']}；/脚本/流浆池输入类型='text' v-model='msg '输入类型=' text ' v-model=' msg ' br { { msg } } br { { msg 2 } } br { { msg 3 } } br { { arr } } br { { JSON } }/body/html(9500 . 163.com)

vue v-for循环

迭代循环：

arr"{ value } } { { { $ index } }中的v-for='name

JSON " { value } } { { index } } { { index } } { { key } }中的v-for='name

JSON " { k } } { { v } } { { index } } { { index } } { { key } }中的v-for='(k，v)

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net vue v-for循环/title style/style脚本src=' http :3359 cdn。bootscs。com/Vue/2。4 .4/Vue。量滴js '/脚本脚本窗口。onload=function(){ new Vue({ El : ' # box '，data:{ arr:['apple '，' banana '，' orange '，' pear']，json: { a: ' apple '，b:'banana '，c : }；/脚本/头体div id=' box ' ul Li v-for=' arr中的值{ value } } { { $ index } }/Li/ul HR ul Li v-for=' JSON中的值{ value } } { { $ index } } { $ key } } { { $ key } }/Li/ul HR ul Li-for='(k，v)JSON中的值{ k } } { { v } } { { $ index } } { { { $ key } }/Li/ul/div/body/html(9501 . 163.com)

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。