Question

vue3 Composition API 添加或删除自定义输入框的类

2022-04-06

667

javascript vuejs3 vue-composition-api

<script lang="ts" setup>
import { ref, computed } from 'vue'
const { modelValue = '' } = defineProps<{
  modelValue: string
}>()
const emit = defineEmits(['update:modelValue'])

const isFilled = ref(false)

const value = computed({
  get() {
    return modelValue
  },
  set(value: string) {
    isFilled.value = value.length > 0
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <input v-model="value" :class="{ 'filled': isFilled }" v-bind="$attrs" />
</template>

sfc playing

第一次按下该键时不会生效。比如：按abcdefg，最后一个输入框显示bcdefg，用退格键删除后再试一次，还是一样。

我把 isFilled.value = value.length > 0 注释掉了，就可以正常使用了，但是不这样做的话，我该如何给元素添加class呢？

我需要的效果就是当输入框的值不为空的时候，给它添加一个名为filled的class。

Answer 1

我会使用观察器来完成这项任务，示例代码：

<script lang="ts" setup>
import { ref, watch } from 'vue'

const { modelValue = '' } = defineProps<{
  modelValue: string
}>()
const emit = defineEmits(['update:modelValue'])
const isFilled = ref(false)
const inputText = ref("")

watch(inputText,(newValue, oldValue)=>{
  isFilled.value = inputText.value.length > 0
  emit('update:modelValue', inputText.value)
})
</script>

<template>
  <input v-model="inputText" :class="{ 'filled': isFilled }" v-bind="$attrs" />
</template>

如果您只想添加类，您也可以内联执行此操作。示例：

<script lang="ts" setup>
import { ref, watch } from 'vue'
const inputText = ref("")
</script>
<template>
  <input v-model="inputText" :class="{ 'filled': (inputText.length>0) }" v-bind="$attrs" />
</template>