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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
基于Vue实现微前端的示例代码
Apr 24 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程序中防止盗链
2008/04/09 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python自动生产表情包
2017/03/17 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
python调用摄像头显示图像的实例
2018/08/03 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
求职信怎么写范文
2014/05/26 职场文书
新课培训心得体会
2014/09/03 职场文书
挂职个人工作总结
2015/03/05 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
入门学习Go的基本语法
2021/07/07 Golang
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android