创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!
小编给大家分享一下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实现导航菜单和编辑文本的方法-创新互联
网页地址:https://www.cdcxhl.com/article40/dhpdeo.html
成都网站建设公司_创新互联,为您提供定制开发、面包屑导航、虚拟主机、电子商务、App开发、微信公众号
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联