GSO (vue03)

循环语句v-for

遍历数组

<p v-for="(one,index) in list" v-cloak >{{one.id}}-----{{one.name}}----{{index}}</p>
data:{
				list:[
					 {id:1,name:'a'},
					{id:2,name:'b'},
					{id:3,name:'c'},
					{id:4,name:'d'}
				]
			}

one是每次遍历的元素，index是索引，都可随意起名。

遍历对象

<p v-for="(key,val,index) in user" v-cloak >{{key}}-----{{val}}----{{index}}</p>
data:{
	user: {id:1,name:'a'},
	}

key是属性名，cal是属性值，index是索引，都可随意取值
（in后也可以放数字）

key

<p v-for="item in user" :key = "item.id"> 
		<input type="checkbox" />{{item.id}} --- {{item.name}}
		</p>
		user: [{id:1,name:'a'},
				        {id:2,name:'b'},
						{id:3,name:'c'}
						]

key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值，key的值只能用数字或字符串（新版本貌似对象也可）。
本例子中，如果不添加key，添加数据后对勾会给错误的选项（若选第一个添加数据后扔给第一个大打对勾）。

v-if和v-show

    <h3 v-if="flag">这是使用v-if控制的元素</h3>
   <h3 v-show="flag">这是使用v-show控制的元素</h3>

• v-if和v-show用于控制元素是否显示。
• v-if每次都会重新删除或创建元素。
• v-show不会进行dom的删除和创建，而是切换元素display样式。
• v-if有较高的切换性能消耗，v-show有较高的初始渲染消耗。
• 元素频繁切换用v-show，元素不会被用户看到用v-if

过滤器

使用格式｛｛数据名|过滤器名｝｝
过滤器只改变数据的显示，并不会改变数据本身。
私有过滤器
filters:{名字:function(){}（写在data中）（优先调用私有过滤器）
公共过滤器
Vue.filter(“名字”,function(){})；
函数中第一个参数为过滤的数据，后面可自行添加多个参数。

实例：

{{msg|dateFormate}}
    Vue.filter("dateFormate",function(dataStr,pattern)
    {
    return dataStr.replace(/自卑/g,"自慰");
    })

将dataStr中的“自卑”全部换为“自慰”。
若将正则表达式改为使用"自卑",则只会替换第一个自卑。