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 相关文章推荐
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
详解微信小程序的 request 封装示例
Aug 21 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 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
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
Python可变参数用法实例分析
2017/04/02 Python
python数据处理实战(必看篇)
2017/06/11 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
python监控键盘输入实例代码
2018/02/09 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python中update的基本使用方法详解
2019/07/17 Python
python内打印变量之%和f的实例
2020/02/19 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
我的中国梦主题教育活动总结
2015/05/07 职场文书
处罚决定书范文
2015/06/24 职场文书