<view style="font-weight:bold;float: left;line-height: 20px; margin-left: 60px;display: flex; align-items: center;"> <text style="">深圳宝安体育场训练基地</text> <view class="iconfont icon-xiangyou"></view> <!-- <text v-text="this.latitude"></text> <text v-text="this.longitude"></text> --> </view> <view> <text>营业中|</text> </view>让上面的view标签显示的数据和下面的view标签显示的数据不在同一行

你可以给上面的 view 标签添加 CSS 样式 `display: block;` 或者 `clear: both;`，这样就可以让它独立成一行显示，不和下面的 view 标签在同一行了。例如：

<view style="font-weight:bold;float: left;line-height: 20px; margin-left: 60px;display: block; clear: both; align-items: center;">
    <text style="">深圳宝安体育场训练基地</text>
    <view class="iconfont icon-xiangyou"></view>
    <!-- <text v-text="this.latitude"></text>
    <text v-text="this.longitude"></text> -->
</view>
<view>
    <text>营业中|</text>
</view>

相关问题

<view style="display: flex; align-items: center; flex-wrap: nowrap ;justify-content: space-between;"> <view class="f1 ml5" style="font-size:36rpx;font-weight:bold">我的会员信息:</view> <view style="width: 150rpx;background-color: #39b54a;border-radius: 20rpx;" > <view style="color: #ffffff;font-size: 28rpx;text-align: center;" >订单中心</view> </view> </view>怎么修改代码让这两个元素两端对齐？

可以将父元素的`justify-content`属性设置为`space-between`，这样两个元素就会分别靠近父元素的两端对齐。修改后的代码如下：

<view style="display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-between;">
    <view class="f1 ml5" style="font-size: 36rpx; font-weight: bold;">我的会员信息:</view>
    <view style="width: 150rpx; background-color: #39b54a; border-radius: 20rpx;">
        <view style="color: #ffffff; font-size: 28rpx; text-align: center;">订单中心</view>
    </view>
</view>

<view style="text-align: center;margin-top: 10rpx;"> <view style=" color: red; font-size: 36rpx;font-weight:bold;">总价：</view> <input style=" color: red; font-size: 36rpx;font-weight:bold;" disabled="boolean" name='totalPrice' bindinput="totalPriceInputed" model:value="{{(wxs.getMetalPrices(totalcaltor,ptcaltor,discountcaltor,prices.pt) + wxs.getMetalPrices(totalcaltor,pdcaltor,discountcaltor,prices.pd) + wxs.getMetalPrices(totalcaltor,rhcaltor,discountcaltor,prices.rh) )/10}}"></input> </view>这段代码中bindinput="totalPriceInputed"不能在model:value改变时触发，请问这是为什么？

`bindinput`事件是在用户输入时触发的，而`model:value`是在数据发生变化时才会触发的。所以，当用户在输入框中输入时，`bindinput`事件会被触发，但是当`model:value`发生变化时，`bindinput`事件并不会被触发。

如果想要在`model:value`发生变化时触发事件，应该使用`bindchange`事件。`bindchange`事件会在数据发生变化并且输入框失去焦点时触发。所以，可以将代码中的`bindinput`修改为`bindchange`，这样当`model:value`的值发生变化并且输入框失去焦点时，就会触发`totalPriceInputed`函数。修改后的代码如下：

<view style="text-align: center; margin-top: 10rpx;">
  <view style="color: red; font-size: 36rpx; font-weight: bold;">总价：</view>
  <input style="color: red; font-size: 36rpx; font-weight: bold;" disabled="{{false}}" name="totalPrice" bindchange="totalPriceInputed" model:value="{{(wxs.getMetalPrices(totalcaltor, ptcaltor, discountcaltor, prices.pt) + wxs.getMetalPrices(totalcaltor, pdcaltor, discountcaltor, prices.pd) + wxs.getMetalPrices(totalcaltor, rhcaltor, discountcaltor, prices.rh)) / 10}}"></input>
</view>