vue实现导航菜单和编辑文本的示例代码


Posted in Javascript onJuly 04, 2020

导航菜单实例

<div id="main">
 
 <!-- 激活的菜单样式为 active 类 -->
 <!-- 为了阻止链接在点击时跳转,我们使用了 "prevent" 修饰符 (preventDefault 的简称)。 -->
 
 <nav v-bind:class="active" v-on:click.prevent>
 
  <!-- 当菜单上的链接被点击时,我们调用了 makeActive 方法, 该方法在 Vue 实例中创建。 -->
 
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="home" v-on:click="makeActive('home')">Home</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="projects" v-on:click="makeActive('projects')">Projects</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="services" v-on:click="makeActive('services')">Services</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="contact" v-on:click="makeActive('contact')">Contact</a>
 </nav>
 
  <!-- 以下 "active" 变量会根据当前选中的值来自动变换 -->
 
 <p>您选择了 <b>{{active}} 菜单</b></p>
</div>
 
<script>
// 创建一个新的 Vue 实例
var demo = new Vue({
 // DOM 元素,挂载视图模型
 el: '#main',
 
 // 定义属性,并设置初始值
 data: {
  active: 'home'
 },
 
 // 点击菜单使用的函数
 methods: {
  makeActive: function(item){
   // 模型改变,视图会自动更新
   this.active = item;
  }
 }
});
</script>

效果如下:

vue实现导航菜单和编辑文本的示例代码

编辑文本实例

<!-- v-cloak 隐藏未编译的变量,直到 Vue 实例准备就绪。 -->
<!-- 元素点击后 hideTooltp() 方法被调用 -->
 
<div id="main" v-cloak v-on:click="hideTooltip">
 
 <!-- 这是一个提示框
   v-on:click.stop 是一个点击事件处理器,stop 修饰符用于阻止事件传递
   v-if 用来判断 show_tooltip 为 true 时才显示 -->
 
 <div class="tooltip" v-on:click.stop v-if="show_tooltip">
 
  <!-- v-model 绑定了文本域的内容
   在文本域内容改变时,对应的变量也会实时改变 -->
 
  <input type="text" v-model="text_content" />
 </div>
 
 <!-- 点击后调用 "toggleTooltip" 方法并阻止事件传递 -->
 
 <!-- "text_content" 变量根据文本域内容的变化而变化 -->
 
 <p v-on:click.stop="toggleTooltip">{{text_content}}</p>
 
</div>
 
<script>
var demo = new Vue({
 el: '#main',
 data: {
  show_tooltip: false,
  text_content: '点我,并编辑内容。'
 },
 methods: {
  hideTooltip: function(){
   // 在模型改变时,视图也会自动更新
   this.show_tooltip = false;
  },
  toggleTooltip: function(){
   this.show_tooltip = !this.show_tooltip;
  }
 }
})
</script>

效果如下:

vue实现导航菜单和编辑文本的示例代码

以上就是vue实现导航菜单和编辑文本的示例代码的详细内容,更多关于vue 导航菜单 编辑文本的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
详解Vue.js 响应接口
Jul 04 #Javascript
JavaScript中数组去重的5种方法
Jul 04 #Javascript
JS制作简易计算器的实例代码
Jul 04 #Javascript
基于原生js实现九宫格算法代码实例
Jul 03 #Javascript
JavaScript DOM常用操作代码汇总
Jul 03 #Javascript
JavaScript缺少insertAfter解决方案
Jul 03 #Javascript
原生javascript如何实现共享onload事件
Jul 03 #Javascript
You might like
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
JavaScript实现全选取消效果
2017/12/14 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
学生励志演讲稿
2014/01/06 职场文书
小学新学期教师寄语
2014/01/18 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
金融管理专业求职信
2014/07/10 职场文书
国庆促销活动总结
2014/08/29 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
加强作风建设心得体会
2014/10/22 职场文书
工作证明格式范文
2015/06/15 职场文书