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做的简单的可折叠的两级树形菜单
Sep 21 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
详解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垃圾回收机制引用计数器概念分析
2013/06/24 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
JS面向对象编程浅析
2011/08/28 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
django认证系统实现自定义权限管理的方法
2018/07/16 Python
python实现简单日期工具类
2019/04/24 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Python实现EM算法实例代码
2020/10/04 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
体育教师求职信
2014/06/30 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS