云应用开发类企业案例17.Vue.js实例17Vue.js实例.docxVIP

PAGE1 / NUMPAGES12 Vue.js 实例 Vue.js 实例 本章节为大家介绍几个 Vue.js 实例，通过实例练习来巩固学到的知识点。 导航菜单实例 导航菜单 创建一个简单的导航菜单： div id=main !-- 激活的菜单样式为 active 类 -- !-- 为了阻止链接在点击时跳转，我们使用了 prevent 修饰符 (preventDefault 的简称)。 -- nav v-bind:class=active v-on:click.prevent !-- 当菜单上的链接被点击时，我们调用了 makeActive 方法, 该方法在 Vue 实例中创建。 -- a href=# class=home v-on:click=makeActive(home)Home/a a href=# class=projects v-on:click=makeActive(projects)Projects/a a href=# class=services v-on:click=makeActive(services)Services/a a href=# 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 编辑文本实例 文本编辑 点击指定文本编辑内容： !-- 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 订单列表实例 订单列表 创建一个订单列表，并计算总价： form id=main v-cloa