版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25354709/article/details/86630536
一、使用v-for循环数据
<div id="app">
<ul>
<li v-for="(p, index) in person">{{p.name}} {{index+1}}</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
person: [
{name: '杰克'},
{name: '罗斯'},
{name: '迈克'}
]
}
})
</script>
建议使用 in
二、使用v-for循环二维数组
<div id="app">
<ul>
<li v-for="(p, index) in person">
{{p.name}} {{index+1}}
<ul>
<li v-for="(c,cIndex) in p.color">{{c}} {{index+1}}.{{cIndex+1}}</li>
</ul>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
person: [
{name: '杰克', color: ['green', 'yellow']},
{name: '罗斯', color: ['red', 'blue']},
{name: '迈克', color: ['yellow', 'pink']}
]
}
})
</script>
还有一些循环字符串,或者循环次数的
<div v-for="c in 'aaaa'">{{c}}</div>
<div v-for="c in 30">{{c}}</div>
三、使用v-for循环对象
<div v-for="(value, key, index) in obj">{{value}} {{key}} {{index+1}}</div>
<script>
let vm = new Vue({
el: '#app',
data: {
obj: {name:'xxx', age:9, address: 'xxx'}
}
})
</script>
value是值, key是键名, index是索引。
四、事件
在vue里面绑定事件使用 v-on:click="" , v-on:mouseover="", 可以把v-on: 变成 @, @click="fn1"
建议使用 @click=""
<div id="app">
<div v-on:click="fn1">点我啊</div>
<div @click="fn1">点我啊</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
// 这里面不能用箭头函数,因为箭头函数里面的this会指向window, 所以不能用箭头函数
fn1() {
alert(1);
alert(this.msg);
console.log(this); // this 指的都是根实例vm
}
}
})
</script>
五、在事件中传参
<div id="app">
<div @click="fn1($event, 1)">点我啊</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
// 这里面不能用箭头函数,因为箭头函数里面的this会指向window, 所以不能用箭头函数
fn1(event, a) {
alert(1);
alert(this.msg);
console.log(this); // this 指的都是根实例vm
console.log(event); // 事件对象
console.log(a); // 1
}
}
})
</script>
如果不传递参数,则不要写括号,会自动传入事件源。
如果写括号了,要手动传入 $event属性。
六、简易todo
<div id="app">
<input type="text" v-model="val" @keyup="add" />
<!-- 或者使用修饰符 @keyup.13 或者 @keyup.enter , 当按回车的时候执行add方法 -->
<!-- @keyup.ctrl.enter 就是按住 ctrl加enter 按键才执行 -->
<input type="text" v-model="val" @keyup.enter="add" />
<ul>
<li v-for="(a,index) in arr">{{a}}
<button @click="remove(index)">删除</button>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
arr: [],
val: '',
},
methods: {
add(e) {
// 如果按回车键
if (e.keyCode === 13) {
this.arr.unshift(this.val);
this.val = '';
}
},
remove(i) {
// 把索引相同的删除掉。 索引不相等的才留下。
this.arr = this.arr.filter((item, index) => index !== i)
}
}
})
</script>