vue.js는 콘텐츠를 변경하기 위해 클릭하는 방법을 구현합니다: [new Vue({el:"#example",data:{flag:true,btnText:'yuan/ton',},methods:{showToggle:function( ) {this.flag...]
본 글의 운영 환경: windows10 시스템, vue.js 2.9, thinkpad t480 컴퓨터
표시된 내용을 변경하려면 스위치 버튼을 클릭해야 합니다.
다음 코드에서 플래그는 스위치의 변경을 제어하여 다른 단위를 전환할 수 있으며, 버튼도 설정할 수 있습니다. 클릭 시 표시 및 숨기기
구체 구현 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue点击切换改变内容</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<Col span="2" style="text-align: center;">
<p style='margin-top:8px;font-size:12px;' v-text="btnText" v-show='flag==true'></p>
<p style='margin-top:8px;font-size:12px;' v-text="btnText" v-show='flag==false'></p>
</Col>
<Col span='2'>
<span @click='switchChange'>
<Icon type="arrow-swap" class='contractadd_icon'></Icon>
</span>
</Col>
<script type="text/javascript">
new Vue({
el:"#example",
data:{
flag:true,//单位切换开关
btnText:'元/吨',
},
methods:{
showToggle:function(){
this.flag = !this.flag
if(this.flag==true){
this.btnText = "元/吨"
}else if(this.flag==false){
this.btnText = "元/方"
}
}
}
})
</script>
</body>
</html>권장 학습: php training
위 내용은 vue.js가 클릭하여 변경 가능한 콘텐츠를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!