uniapp的相关知识(2)

1、事件监听:可以使用@符号或者v-on来监听对应的事件,下面是程序示例:

javascript 复制代码
//绑定点击事件
<template>
  <view>
    <button @click="handleClick">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了!');
    }
  }
}
</script>


//绑定输入事件
<template>
  <view>
    <input type="text" @input="handleInput" placeholder="请输入内容" />
  </view>
</template>

<script>
export default {
  methods: {
    handleInput(event) {
      console.log('输入内容:', event.detail.value);
    }
  }
}
</script>


//绑定触摸事件
<template>
  <view>
    <view @touchstart="handleTouchStart">触摸这里</view>
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchStart(event) {
      console.log('触摸开始', event.touches[0].clientX, event.touches[0].clientY);
    }
  }
}
</script>

2、v-if:可以通过此方法来控制是否要显示,使用template则可以让让里面的image、view与box同级别,如果将template换成view则是box和view同级别,下面是程序示例:

javascript 复制代码
<view class="box1" v-if="false">
    <image src="../../static/pic1.png"mode=""></image>
</view>

<view class="box2" v-show="false">
    <image src="../../static/pic2.png"mode=""></image>
</view>

<template v-if="true">
    <image src="../../static/logo.png"mode=""></image>
    <view>logo</view>
</template>

<template v-else>
    <image src="../../static/pic4.jpg" mode=""></image>
    <view>pic4</view>
</template>

3、数据绑定:v-bind是其数据绑定,可以缩写为":",下面是程序示例:

javascript 复制代码
//绑定属性
<view v-bind:class="dynamicClass"></view>
<view :class="dynamicClass"></view>

//绑定样式
<view v-bind:style="{ color: textColor, fontSize: '16px' }"></view>
<view :style="{ color: textColor, fontSize: '16px' }"></view>

//绑定多个属性
<view v-bind="{ id: 'item-' + item.id, class: dynamicClass }"></view>
<view :="{ id: 'item-' + item.id, class: dynamicClass }"></view>
相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js