WeChat 애플릿을 사용하여 자리 표시자 프롬프트 텍스트를 동적으로 설정하는 방법

이 글은 주로 자리 표시자 프롬프트 텍스트와 버튼 선택/취소 상태를 동적으로 설정하는 WeChat 애플릿 방법을 소개하며, this.setData를 사용하여 속성 데이터를 동적으로 설정하는 이벤트 바인딩 및 관련 작업 기술을 포함합니다.

이 글은 기사에서는 자리 표시자 프롬프트 텍스트와 버튼 선택 및 취소 상태를 동적으로 설정하는 WeChat 애플릿 방법의 예를 설명합니다. 참조를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

Rendering display

클릭 이벤트 자리 표시자 메서드를 바인딩하여 data-num 값을 가져오고 num이 얼마나 같은지 판단합니다. class="{{num==X?'active':''}}" 수식은 어떤 태그가 선택되었는지 결정합니다(예: 파란색 배경에 흰색 텍스트).

js는 data-key

를 획득하여 입력 입력 상자에 자리 표시자의 동적 값을 설정합니다. wxml의 내용:

<view class="retrieve-list">
  <p class="option">
    <span bindtap="placeholder" data-num=&#39;1&#39; data-key=&#39;&#39; data-val=&#39;&#39; class="{{num==1?&#39;active&#39;:&#39;&#39;}}">全部</span>
    <span bindtap="placeholder" data-num=&#39;2&#39; data-key=&#39;标题&#39; data-val=&#39;ti&#39; class="{{num==2?&#39;active&#39;:&#39;&#39;}}">标题</span>
    <span bindtap="placeholder" data-num=&#39;3&#39; data-key=&#39;摘要&#39; data-val=&#39;ab&#39; class="{{num==3?&#39;active&#39;:&#39;&#39;}}">摘要</span>
    <span bindtap="placeholder" data-num=&#39;4&#39; data-key=&#39;申请人&#39; data-val=&#39;ap&#39; class="{{num==4?&#39;active&#39;:&#39;&#39;}}">申请人</span>
    <span bindtap="placeholder" data-num=&#39;5&#39; data-key=&#39;申请号&#39; data-val=&#39;an&#39; class="{{num==5?&#39;active&#39;:&#39;&#39;}}">申请号</span>
    <span bindtap="placeholder" data-num=&#39;6&#39; data-key=&#39;代理人&#39; data-val=&#39;ag&#39; class="{{num==6?&#39;active&#39;:&#39;&#39;}}">代理人</span>
  </p>
  <p class="option">
    <span bindtap="placeholder" data-num=&#39;7&#39; data-key=&#39;代理机构&#39; data-val=&#39;ac&#39; class="{{num==7?&#39;active&#39;:&#39;&#39;}}">代理机构</span>
    <span bindtap="placeholder" data-num=&#39;8&#39; data-key=&#39;公开号&#39; data-val=&#39;pn&#39; class="{{num==8?&#39;active&#39;:&#39;&#39;}}">公开号</span>
    <span bindtap="placeholder" data-num=&#39;9&#39; data-key=&#39;发明人&#39; data-val=&#39;in&#39; class="{{num==9?&#39;active&#39;:&#39;&#39;}}">发明人</span>
    <span bindtap="placeholder" data-num=&#39;10&#39; data-key=&#39;专利权人&#39; data-val=&#39;pa&#39; class="{{num==10?&#39;active&#39;:&#39;&#39;}}">专利权人</span>
  </p>
</view>

js의 내용:

var app = getApp()
Page({
 data: {
  placeholder:'请输入',
  ph:'',
  num:1,
  key:'',
 },
 placeholder:function(e){
  var num = e.currentTarget.dataset.num
  this.setData({
   ph: this.data.placeholder+e.currentTarget.dataset.key
  })
  this.setData({
   num: num
  })
})

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

js에서 양방향 바인딩을 구현하는 방법

캔버스에서 생성된 이미지를 js에 저장하는 방법

js를 사용하여 재할당을 구현하는 방법

인증 코드를 구현하는 방법 JS Countdown

nodejs를 이용하여 mongodb의 채우기, 삭제, 수정, 확인 모듈을 조작하는 방법

socket.io를 이용하여 채팅방을 구현하는 방법

AngularJS에서 드래그 앤 드롭 기능을 구현하는 방법

AngularJS 함수에서 점프 구현 방법

jQuery를 사용하여 휴대전화 번호 입력 정기 확인 구현 방법

위 내용은 WeChat 애플릿을 사용하여 자리 표시자 프롬프트 텍스트를 동적으로 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!