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


Posted in Javascript onAugust 22, 2018

代码实例:

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

Javascript 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
js实现简单的随机点名器
Sep 17 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 #Javascript
vuejs选中当前样式active的实例
Aug 22 #Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 #Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 #Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 #Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 #Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
PHP JSON 数据解析代码
2010/05/26 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
python实现备份目录的方法
2015/08/03 Python
python微信好友数据分析详解
2018/11/19 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
python操作gitlab API过程解析
2019/12/27 Python
python要安装在哪个盘
2020/06/15 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
公司门卫岗位职责
2014/03/15 职场文书
2014年路政工作总结
2014/12/10 职场文书
回复函范文
2015/07/14 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle