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 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 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将XML转数组过程详解
2013/11/13 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
php中序列化与反序列化详解
2017/02/13 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
ExtJS 入门
2010/10/29 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
vue实现放大镜效果
2020/09/17 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python编写Windows Service服务程序
2018/01/04 Python
python使用KNN算法手写体识别
2018/02/01 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
python+tkinter实现学生管理系统
2019/08/20 Python
HEMA法国:荷兰原创设计
2019/02/21 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
幼儿园保教管理制度
2014/02/03 职场文书
应届大专生自荐书
2014/06/16 职场文书
2014年教师节活动总结
2014/08/29 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
介绍信如何写
2015/01/31 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle