双向绑定不同的写法

最新推荐文章于 2024-04-11 16:42:01 发布

行走在云端的鱼

最新推荐文章于 2024-04-11 16:42:01 发布

阅读量232

点赞数

分类专栏：小程序 vue

本文链接：https://blog.youkuaiyun.com/xianqirse/article/details/114266505

版权

小程序同时被 2 个专栏收录

3 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

1、应用场景：小程序选项卡切换
html代码如下：

 <view class='tabli {{current == 1 ? "active" : ""}}' data-index="1" bindtap="btnclick">
      <view>申请预约</view>
      <image src="../../statics/rec_tips.png"></image>
    </view>
    <view class='tabli {{current == 2 ? "active" : ""}}' data-index="2" bindtap="btnclick">
      <view>排队信息</view>
      <image src="../../statics/rec_tips.png"></image>
    </view>
    <view class='tabli {{current == 3 ? "active" : ""}}' data-index="3" bindtap="btnclick">
      <view>预约查询</view>
      <image src="../../statics/rec_tips.png"></image>
    </view>
    <view class="conBody"  style="display:{{current == 1?'block':'none'}}">1111申请预约 代码已省略</view>
    <view class="conBody"  style="display:{{current == 2?'block':'none'}}">222排队信息 代码已省略</view>
    <view class="conBody"  style="display:{{current == 3?'block':'none'}}">333预约查询 代码已省略</view>

js代码如下：
在这里插入图片描述

  btnclick: function (e) {
    this.setData({
      current: e.currentTarget.dataset.index === undefined?'':Number(e.currentTarget.dataset.index)
    })
  }

效果图
在这里插入图片描述
2、应用场景：vue项目中根据变量动态样式绑定
代码如下：
写法 :style="{left:(showMenu?’’:0),top:(showMenu?’’:‘61px’)}"
:class="{active:index==secondActive}"

  <div class="main-content" :style="{left:(showMenu?'':0),top:(showMenu?'':'61px')}">
    <div class="navigatorText" v-if="showMenu">{{currentNavfirstText}}/ <span style="color: #528EFC;">{{currentNavsecondText}}</span></div>
    <header class="main-header-nav">
      <div class="navLi" :class="{active:index==secondActive}" v-for="(item, index) in secondList" @click="secondMenuClick(index, item, 'click')">
        <i v-if="item.icon != null" :class="item.icon"></i><span>{{item.name}}</span>
      </div>
    </header>
    <section class="sectionBody" :style="{top:(showMenu?'':'12%')}" :class="{'sectionBodyActive': secondListnotNull}">
      <iframe class="iframeClass" src="" frameborder="0" :src="main"></iframe>
    </section>
  </div>