介绍 & lt; ! DOCTYPE html>,
& lt; html>,
& lt; head>,
,& lt; meta charset=皍tf-8"祝辞,
,& lt; title> vue点击切换改变内容& lt;/title>,
,& lt; script src=癶ttps://cdn.bootcss.com/vue/2.2.2/vue.min.js"祝辞& lt;/script>,
时间/head> & lt;
& lt; body>,
,& lt; Col 跨度=?“,在
& lt;才能p 风格=& # 39;margin-top: 8 px;字体大小:12 px; & # 39;, v-text=癰tnText", v-show=& # 39;标志==真正的# 39;祝辞& lt;/p>
& lt;才能p 风格=& # 39;margin-top: 8 px;字体大小:12 px; & # 39;, v-text=癰tnText", v-show=& # 39;标志==假# 39;祝辞& lt;/p>
,& lt;/Col>
,& lt; Col 跨度=& # 39;2 & # 39;比;
& lt;才能span @click=& # 39; switchChange& # 39;比;
& lt;才能Icon 类型=癮rrow-swap",类=& # 39;contractadd_icon& # 39;祝辞& lt;/Icon>,,
& lt;才能/span>
,& lt;/Col>
,& lt; script 类型=拔谋?javascript"祝辞,
new Vue({大敌;
el才能:“# example",,
,数据:{大敌;
,,国旗:真的,//单位切换开关
,,btnText: & # 39;元/吨& # 39;
,,},
方法:{才能,
,,showToggle:函数(){,
,,,this.flag =, ! this.flag
,,,如果(this.flag==true) {,
,,,,this.btnText =,“元/吨“,
,,,}else 如果(this.flag==false) {,
,,,,this.btnText =,“元/方,,
,,,},
,,},
,,},
})大敌;
& lt;/script>大敌;
时间/body> & lt;
& lt;/html> & lt; ! DOCTYPE html>
& lt; html lang=癳n", xmlns: v-bind=癶ttp://www.w3.org/1999/xhtml", xmlns: v=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> Title
,& lt; script src=癶ttps://cdn.jsdelivr.net/npm/axios@0.12.0 dist/axios.min.js"祝辞& lt;/script>
,& lt; script src=癶ttps://cdn.jsdelivr.net/npm/lodash@4.13.1 lodash.min.js"祝辞& lt;/script>
,& lt; script src=癶ttps://cdn.jsdelivr.net/npm/vue"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=叭吮?
,& lt; template v=發oginType ===, & # 39;用户名# 39;“比;
& lt;才能label> Username</label>
& lt;才能input 占位符=癊nter your username",关键=皍sername-input"比;
,& lt;/template>
,& lt; template v-else>
& lt;才能label> Email</label>
& lt;才能input 占位符=癊nter your email address",关键=癳mail-input"比;
,& lt;/template>
,& lt; button @click=癱hange"祝辞change
& lt;/div>
,
,
& lt; script 类型=拔谋?javascript"比;
,var vm =, Vue ({new
el才能:& # 39;# 1 # 39;
数据:{才能
,,loginType :, & # 39;用户名# 39;
,,},
方法:{才能
,才能改变:函数(){
,,,如果(this.loginType==& # 39;用户名# 39;){
,,,,this.loginType=& # 39;电子邮件# 39;
,,,}
其他,,,{
,,,,this.loginType=& # 39;用户名# 39;
,,,}
,,}
,,}
,})
& lt;/script>
,
,
& lt;/body>
& lt;/html>
今天就跟大家聊聊有关使用Vue。js怎么实现点击切换按钮改变内容,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强>代码描述:点击切换按钮,来改变显示的内容,切换不同的单位.flag相当于一个开关,控制开关的改变,来切换不同的单位。同样适用于其他的切换内容实例,也可设置按钮点击显示隐藏等。
<>强拓展知识:vue点击按钮改变页面显示内容的方法
<>强如下所示:
看完上述内容,你们对使用Vue.js怎么实现点击切换按钮改变内容有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
