vue实现导航菜单和编辑文本的示例代码

导航菜单实例

<div id='main'> <!-- 激活的菜单样式为 active 类 --> <!-- 为了阻止链接在点击时跳转，我们使用了 'prevent' 修饰符 (preventDefault 的简称)。 --> <nav v-bind: v-on:click.prevent> <!-- 当菜单上的链接被点击时，我们调用了 makeActive 方法, 该方法在 Vue 实例中创建。 --> <a href='https://www.haobala.com/bcjs/11364.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' v-on:click='makeActive(’home’)'>Home</a> <a href='https://www.haobala.com/bcjs/11364.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' v-on:click='makeActive(’projects’)'>Projects</a> <a href='https://www.haobala.com/bcjs/11364.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' v-on:click='makeActive(’services’)'>Services</a> <a href='https://www.haobala.com/bcjs/11364.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' 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>

效果如下：

编辑文本实例

<!-- v-cloak 隐藏未编译的变量，直到 Vue 实例准备就绪。 --><!-- 元素点击后 hideTooltp() 方法被调用 --> <div v-cloak v-on:click='hideTooltip'> <!-- 这是一个提示框 v-on:click.stop 是一个点击事件处理器，stop 修饰符用于阻止事件传递 v-if 用来判断 show_tooltip 为 true 时才显示 --> <div 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 导航菜单 编辑文本的资料请关注好吧啦网其它相关文章！