Vue.js点击切换按钮改变内容的实例讲解
时间：2020-10-14 10:05:36|栏目：vue|点击： 次
代码实例：
代码描述：点击切换按钮，来改变显示的内容，切换不同的单位。flag相当于一个开关，控制开关的改变，来切换不同的单位。同样适用于其他的切换内容实例，也可设置按钮点击显示隐藏等。
<!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>
拓展知识：vue 点击按钮改变页面显示内容的方法
如下所示：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="one">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
<button @click="change">change</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#one',
data:{
loginType : 'username'
},
methods:{
change:function(){
if(this.loginType=='username'){
this.loginType='email'
}
else{
this.loginType='username'
}
}
}
})
</script>
</body>
</html>
上一篇：vue 系列――vue2-webpack2框架搭建踩坑之路
栏 目：vue
下一篇：详解vue项目打包后通过百度的BAE发布到网上的流程
本文地址：http://www.codeinn.net/misctech/11196.html
