vue实现文本框的双向数据绑定和点击按钮实现其他元素的显示隐藏

vue实现文本框的双向数据绑定和点击按钮实现其他元素的显示隐藏

 

文章目录

• 一、实现文本框的双向数据绑定
• 二、点击按钮实现其他元素的显示隐藏

 

---

话不多说直接上代码

一、实现文本框的双向数据绑定

‘代码部分：

<template>
  <div>
        <div class="tp" v-show="wqe"></div>
        <button @click="qwe">点击控制显示隐藏</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      wqe:true,
      };
    },
    methods:{
      qwe(){
     this.wqe=!this.wqe
      },
    }
  }
</script>

<style>
.tp{
  background-color: aqua;
  width: 100px;
  height: 100px;
}
</style>

 效果部分：

 

二、点击按钮实现其他元素的显示隐藏

代码部分：

<template>
  <div>
        {{zzz}}
        <input type="text" v-model="zzz" @input="ppp">
  </div>
</template>

<script>
  export default {
    data() {
      return {
      zzz:"123"
      };
    },
    methods:{
      ppp(e){
      this.zzz=e.target.value
      }
    }
  }
</script>

<style>

</style>

效果部分：

 结尾：

不管是是vue还是小程序思路基本上差不多仅仅是便签不同而已