html>
component组件传值提交
var itemList = {
props: ["itemtxt","xx"],
template: "
{{itemtxt}}",methods: {
myclick: function(){
this.$emit("delist",this.xx);
}
}
}
var vm = new Vue ({
el: "#millia",
components: {
"item-list" : itemList,
},
data: {
int: "",
lists: []
},
methods: {
sub: function(){
this.lists.push(this.int);
this.int = "";
},
delthis: function(xx){
// alert(xx);
this.lists.splice(x,1);
}
}
})
知识点
父组件 -> 子组件 父组件通过 props 向子组件传递数据
子组件 -> 父组件 子组件通过事件向父级组件发送消息,需使用this.$emit("function",pram);其中function为父组件函数(必须),pram为需要传递参数(可选)
在父组件中子组件引用处,使用函数 v-on:function="function1" //其中function为子组件中使用函数,function1为父组件赋值函数
列表渲染 v-for
v-for 指令需要使用 item in items 形式的特殊语法,items 是数组或对象名 item 是数组或对象迭代的别名。
当“items”为数组时,v-for 支持一个可选的第二个参数为当前项的索引。例:
{{ parentMessage }} - {{ index }} - {{ item.message }}
当“items”为对象时,v-for 支持第二个的参数为键名,第三个参数为索引。例:
{{ index }}. {{ key }}: {{ value }}
数组更新检测的变异方法
push()方法
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
语法:arrayObject.push(newelement1,newelement2,....,newelementX)
newelement1必需。要添加到数组的第一个元素。
newelement2可选。要添加到数组的第二个元素。
newelementX可选。可添加多个元素。
说明:push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
pop()方法
pop() 方法用于删除并返回数组的最后一个元素。
语法:arrayObject.pop()
说明:pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。
shift()方法
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
语法:arrayObject.shift()
说明:如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方法不创建新数组,而是直接修改原有的 arrayObject。
unshift()方法
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
语法:arrayObject.unshift(newelement1,newelement2,....,newelementX)
newelement1必需。向数组添加的第一个元素。
newelement2可选。向数组添加的第二个元素。
newelementX可选。可添加若干个元素。
说明:unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。
请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。
splice()方法
splice() 方法用于插入、删除或替换数组的元素。
语法:arrayObject.splice(index,howmany,item1,.....,itemX)
index必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX可选。向数组添加的新项目。
说明:splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
sort()方法
sort() 方法用于对数组的元素进行排序。
语法:arrayObject.sort(sortby)
sortby可选。规定排序顺序。必须是函数。
说明:如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。
reverse()方法
reverse() 方法用于颠倒数组中元素的顺序。
语法:arrayObject.reverse()
说明:该方法会改变原来的数组,而不会创建新的数组。