1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <template>
- <div class="flex">
- <template v-for="(item,index) in stringArr">
- <span
- @click="checkItem(item,index)"
- :class="{'bg': (arr.indexOf(index) > -1)} "
- class="cut-string saga-border pointer border-hover"
- >{{item}}</span>
- </template>
- </div>
- </template>
- <script>
- export default {
- props: {
- string: {
- type: String,
- default: ""
- }
- },
- data() {
- return {
- stringArr: this.string.split(""),
- obj: {},
- arr: []
- }
- },
- created() {},
- mounted() {},
- methods: {
- checkItem(item, index) {
- this.obj[index] = item
- this.arr.push(index)
- },
- clear() {
- this.stringArr = this.string.split("")
- this.obj = {}
- this.arr = []
- },
- getData() {
- let string = ""
- for (let key in this.obj) {
- string += this.obj[key]
- }
- console.log(string)
- return string
- }
- },
- watch: {
- string: function() {
- this.clear()
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .cut-string {
- width: 50px;
- height: 50px;
- text-align: center;
- line-height: 50px;
- }
- .bg {
- background: red;
- }
- </style>
|