vue实现字母添加排序
Vue 实现字母添加排序的方法
使用计算属性排序
在 Vue 中可以通过计算属性对字母数组进行排序。计算属性会自动响应数据变化，确保排序结果实时更新。
data() {
return {
letters: ['b', 'a', 'c', 'e', 'd']
}
},
computed: {
sortedLetters() {
return [...this.letters].sort()
}
}动态添加字母并排序
结合输入框和按钮实现动态添加字母并保持排序状态。使用 v-model 绑定输入值，通过方法添加新字母。
data() {
return {
newLetter: '',
letters: ['a', 'b', 'c']
}
},
methods: {
addLetter() {
if (this.newLetter) {
this.letters.push(this.newLetter)
this.newLetter = ''
}
}
},
computed: {
sortedLetters() {
return [...this.letters].sort()
}
}模板部分示例：
<input v-model="newLetter" placeholder="输入字母">
<button @click="addLetter">添加</button>
<ul>
<li v-for="letter in sortedLetters" :key="letter">{{ letter }}</li>
</ul>自定义排序规则
需要实现自定义排序规则时，可以给 sort 方法传入比较函数。以下示例实现不区分大小写的字母排序。
computed: {
caseInsensitiveSort() {
return [...this.letters].sort((a, b) => {
return a.localeCompare(b, undefined, { sensitivity: 'base' })
})
}
}使用第三方库实现高级排序
对于复杂排序需求，可以使用 lodash 等工具库。先安装 lodash，然后在组件中导入使用。
npm install lodash组件中使用示例：
import _ from 'lodash'
computed: {
sortedLetters() {
return _.sortBy(this.letters)
}
}响应式排序注意事项
Vue 的响应式系统不会检测数组内部变化，直接修改数组元素不会触发视图更新。应使用 Vue.set 或数组的变更方法（push/pop/shift/unshift/splice/sort/reverse）来确保响应性。
methods: {
updateLetter(index, newValue) {
this.$set(this.letters, index, newValue)
}
}
