两个数组遍历取出相同的
vue 动态添加样式的方式
一、
<li v-for="(chatting,index) in item" :key="index" :class="{'user_right':chatting.user_id}">
判断chatting中是否有user_id,如果有就追加user_right类名
二、
<p :class="coms===1?'hear1':'hear'"></p>
判断coms是否等于1,如果等于就追加hear1类名否则追加hear类名
Vue3 watch 侦听 props 的变化
watch 有两种写法
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
如果我们想侦听 props 上的属性变化,需要采用第一种写法
// 假设 props 上有个 name 属性
// 下面的写法会生效
watch(
() => props.name,
(count, prevCount) => {
/* ... */
}
)
// 下面的写法不会被触发
watch(props.name, (count, prevCount) => {
/* ... */
})
Vue3—通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)
子组件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<input type="file" id="fileInput" name="file" multiple="multiple" @change="selectFile"/>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'HelloWorld',
setup() {
const msg = ref('HelloWorld') // 响应式数据:msg
const fileList = ref([]) // 响应式数据:上传的文件列表
function selectFile () { // 有文件上传时
var file = document.getElementById('fileInput').files[0] // File(Blob) 对象 File extends Blob
fileList.value.push(file)
}
return { // return中的数据会被父组件拿到
msg,
fileList,
selectFile
}
}
})
</script>
父组件
<template>
<div class="home">
<HelloWorld ref="sonRef" />
<button @click="getSonComponent">GetSonComponent</button>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
export default defineComponent({
name: 'Home',
components: {
HelloWorld
},
setup(){
const sonRef = ref(null) // 通过 ref 绑定子组件
function getSonComponent () { // 通过 ref 获取子组件\
// 获取子组件的数据
console.log(sonRef.value)
console.log(sonRef.value.msg)
sonRef.value.fileList.forEach(item => {
console.log(item)
})
}
return {
sonRef,
getSonComponent
}
}
})
</script>
vue v-for循环多个标签,点击标签变色,再点击取消,可以同时多选点击多个
html
<div class="relFacilityTitcon">
<i v-for="(item,index) in facilityList" :key="index" @click="changeSpan(index);" :class="{'bgcolor':spanIndex.indexOf(index)>-1}" >{{item}}</i>
</div>
data:
data:{
spanIndex:[],
}
vue:
methods: {
changeSpan(index){
let arrIndex = this.spanIndex.indexOf(index);
// console.log(arrIndex);
if(arrIndex>-1){
this.spanIndex.splice(arrIndex,1);
}else{
this.spanIndex.push(index);
}
},