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 相关文章推荐
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
常用的javascript设计模式
Jan 11 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
How do I change MySQL timezone?
2008/03/26 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
网站上面有这种切换效果
2006/06/26 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
观看建国大业观后感
2015/06/01 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技