点击按钮切换div里的内容

最新推荐文章于 2024-10-04 11:07:39 发布

xuni66

最新推荐文章于 2024-10-04 11:07:39 发布

阅读量542

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/xuni66/article/details/132375135

版权

1.在你的Vue文件中，定义两个数据变量，用于存储需要交换的内容

data() {
  return {
    input1: '',
    input2: ''
  }
}

2.在模板中，将输入框与对应的数据变量绑定起来：

<template>

<div>

<input v-model="input1" type="text">

<button @click="swapContent">交换</button>

<input v-model="input2" type="text">


</div>

</template>

3.在methods中定义一个方法swapContent，用于实现内容的互换。在这个方法中，你可以使用一个临时变量来交换两个数据变量的值：

methods: {
  swapContent() {
    // 使用临时变量保存input1的值
    let temp = this.input1;
    // 将input2的值赋给input1
    this.input1 = this.input2;
    // 将临时变量的值赋给input2
    this.input2 = temp;
  }
}

最后整体就是这样：

<template>
  <div>
    <input v-model="input1" type="text">

    <button @click="swapContent">交换</button>
    <input v-model="input2" type="text">
  </div>
</template>

<script>
export default {
  data(){
    return{
      input1: '',
      input2: ''
    }
  },
  methods: {
    swapContent() {
      // 使用临时变量保存input1的值
      let temp = this.input1;
      // 将input2的值赋给input1
      this.input1 = this.input2;
      // 将临时变量的值赋给input2
      this.input2 = temp;
    }
  }

}
</script>