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 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
angularJS 入门基础
Feb 09 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
webpack之devtool详解
Feb 10 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
Vue实现移动端拖拽交换位置
Jul 29 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP新手上路(三)
2006/10/09 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
Ajax 数据请求的简单分析
2011/04/05 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
python 类详解及简单实例
2017/03/24 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
python数据封装json格式数据
2018/03/04 Python
python实现Windows电脑定时关机
2018/06/20 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
家长会演讲稿
2014/04/26 职场文书
总经理任命书范本
2014/06/05 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
2014年维稳工作总结
2014/11/18 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书