温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue实现导航菜单和编辑文本的方法

发布时间:2020-07-06 11:10:39 来源:亿速云 阅读:234 作者:清晨 栏目:开发技术

小编给大家分享一下vue实现导航菜单和编辑文本的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

导航菜单实例

<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实现导航菜单和编辑文本的方法有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI