vue3笔记1

两个数组遍历取出相同的

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);
       }
   },