of 和 in 都是一样的效果
html代码:
<div id="app">
<ul>
<li v-for="item of datalist">{{ item }}li>
ul>
<ul>
<li v-for="item in dataobj">{{ item }}li>
ul>
<ul>
<li v-for="(index,item) of datalist">{{ item }}----{{ index }}li>
ul>
<ul>
<li v-for="(item,key) in dataobj">{{ item }}----{{ key }}li>
ul>
div>
javascript:
<script>
const { createApp, ref } = Vue
createApp({
data() {
return {
datalist: ['111', '222', '333'],
dataobj: {
a: '1',
b: '2',
c: '3'
}
}
}
}).mount('#app')
script>
跟踪每个节点的身份,从而重用和重新排序现有的元素
理想的key值是每项都有唯一的id
<ul>
<li v-for="item in dataobj" key="item.id">{{ item }}li>
ul>
1、push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2、根据索引对数组进行重新赋值
filter()、concat()、slice()、map()
html:
<input type="text" @input="onchange()" v-model="inputText" />
<ul>
<li v-for="item in datalist">{{ item }}li>
ul>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
data() {
return {
datalist: ['1aa11', '22dd2', '33gg3', 'qqa11', '2rrd2', 'dgklg3'],
datalist1: ['1aa11', '22dd2', '33gg3', 'qqa11', '2rrd2', 'dgklg3'],
inputText: ''
}
},
methods: {
onchange() {
this.datalist = this.datalist1.filter(item => {
return item.indexOf(this.inputText) > -1
})
}
}
}).mount('#app')
script>
当子节点触发事件后,若父节点有触发事件,父节点也会跟着触发
1.1.没有添加事件修饰符
html:
<ul @click="clickUlHandler()">
<li @click="clickLiHandler()">1111li>
ul>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
methods: {
clickUlHandler() {
console.log('ul触发了')
},
clickLiHandler() {
console.log('li触发了')
}
}
}).mount('#app')
script>
点击 < li >标签,< ul > 标签的事件也触发了
1.2.添加事件修饰符 stop:
stop 只能添加在 < li > 中
html:
<ul @click="clickUlHandler()">
<li @click.stop="clickLiHandler()">1111li>
ul>
只触发了 < li > 的事件
1.3.添加事件修饰符 self:
self 只能添加在 < ul > 中
<ul @click.self="clickUlHandler()">
<li @click="clickLiHandler()">1111li>
ul>
还可以通过 e.stopPropagation() 解决以上问题
clickLiHandler(e) {
e.stopPropagation()
console.log('li触发了')
}
点击链接后页面会跳转,通过 prevent 阻止页面跳转
html:
<a href="www.baidu.com" @click.prevent="clickChangePage($event)">
跳转页面
a>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
methods: {
clickChangePage(e) {
// e.preventDefault() 也可以通过调用该方法阻止页面跳转
console.log('页面跳转了')
}
}
}).mount('#app')
script>
被该修饰符修饰的事件只触发一次
html:
<ul @click="clickUlHandler()">
<li @click.once="clickLiHandler()">1111li>
ul>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
methods: {
clickUlHandler() {
console.log('ul触发了')
},
clickLiHandler() {
console.log('li触发了')
}
}
}).mount('#app')
script>
< li > 只触发一次,而 < ul > 可以触发多次
html:
<input type="text" @keyup.enter="keyupHandle($event)" v-model="inputText"/>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
methods: {
keyupHandle(e) {
// 通过判断键值效果一样
// if (e.keyCode === 13) {
// console.log(this.inputText)
// }
console.log(this.inputText)
}
}).mount('#app')
script>