cut_string.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template>
  2. <div class="flex">
  3. <template v-for="(item,index) in stringArr">
  4. <span
  5. @click="checkItem(item,index)"
  6. :class="{'bg': (arr.indexOf(index) > -1)} "
  7. class="cut-string saga-border pointer border-hover"
  8. >{{item}}</span>
  9. </template>
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. props: {
  15. string: {
  16. type: String,
  17. default: ""
  18. }
  19. },
  20. data() {
  21. return {
  22. stringArr: this.string.split(""),
  23. obj: {},
  24. arr: []
  25. }
  26. },
  27. created() {},
  28. mounted() {},
  29. methods: {
  30. checkItem(item, index) {
  31. this.obj[index] = item
  32. this.arr.push(index)
  33. },
  34. clear() {
  35. this.stringArr = this.string.split("")
  36. this.obj = {}
  37. this.arr = []
  38. },
  39. getData() {
  40. let string = ""
  41. for (let key in this.obj) {
  42. string += this.obj[key]
  43. }
  44. console.log(string)
  45. return string
  46. }
  47. },
  48. watch: {
  49. string: function() {
  50. this.clear()
  51. }
  52. }
  53. }
  54. </script>
  55. <style lang="scss" scoped>
  56. .cut-string {
  57. width: 50px;
  58. height: 50px;
  59. text-align: center;
  60. line-height: 50px;
  61. }
  62. .bg {
  63. background: red;
  64. }
  65. </style>