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 相关文章推荐
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
JavaScript基础之this详解
Jun 04 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
详解JSON Web Token 入门教程
Jul 30 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
Vue关于组件化开发知识点详解
May 13 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显示MySQL数据的三种方法
2008/06/05 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
Python中的is和id用法分析
2015/01/26 Python
Python3 操作符重载方法示例
2017/11/23 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Python中如何引入第三方模块
2020/05/27 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
葬礼司仪主持词
2014/03/31 职场文书
幼师辞职信范文
2015/02/27 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
针对吵架老公保证书
2015/05/08 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android