Vue.js点击切换按钮改变内容的实例讲解

来源：动视网责编：小采时间：2020-11-27 22:09:30

Vue.js点击切换按钮改变内容的实例讲解

Vue.js点击切换按钮改变内容的实例讲解:代码实例：代码描述：点击切换按钮，来改变显示的内容，切换不同的单位。flag相当于一个开关，控制开关的改变，来切换不同的单位。同样适用于其他的切换内容实例，也可设置按钮点击显示隐藏等。 <!DOCTYPE html> <html> <

推荐度：

点击下载本文 文档为doc格式

导读Vue.js点击切换按钮改变内容的实例讲解:代码实例：代码描述：点击切换按钮，来改变显示的内容，切换不同的单位。flag相当于一个开关，控制开关的改变，来切换不同的单位。同样适用于其他的切换内容实例，也可设置按钮点击显示隐藏等。 <!DOCTYPE html> <html> <

代码实例：

代码描述：点击切换按钮，来改变显示的内容，切换不同的单位。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.js点击切换按钮改变内容的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

Vue.js点击切换按钮改变内容的实例讲解

推荐度：

点击下载本文 文档为doc格式

标签： VUE 按钮实例

热门焦点

Vue.js点击切换按钮改变内容的实例讲解

Vue.js点击切换按钮改变内容的实例讲解

Vue.js点击切换按钮改变内容的实例讲解

最新推荐

猜你喜欢

热门推荐