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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
JS处理一些简单计算题
Feb 24 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 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
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
jQuery 一个图片切换的插件
2011/10/09 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
微信小程序自定义组件
2017/08/16 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
用Python进行websocket接口测试
2020/10/16 Python
详解Python中的文件操作
2021/01/14 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
英国女性时尚品牌:Apricot
2018/12/04 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
师德师风承诺书
2014/05/23 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
2014年教研工作总结
2014/12/06 职场文书
理想国读书笔记
2015/06/25 职场文书
学术研讨会主持词
2015/07/04 职场文书