现在位置: 首页 / Vue.js / 正文

Vue js 实战技巧：导航菜单与布局切换（七）

  • admin
  • Vue.js
  • 9小时前
  • 3热度
  • 0评论

在本文中，我们将通过一系列实战项目来深入探讨 Vue.js 的核心功能和常见应用场景。无论你是初学者还是有一定经验的开发者，这些实例都能帮助你更好地理解和掌握 Vue.js 的强大之处。我们将从简单的导航菜单开始，逐步介绍文本编辑、订单列表、搜索页面以及布局切换等实用功能。

导航菜单：动态切换选中状态

在任何现代 Web 应用中，导航菜单都是不可或缺的一部分。通过 Vue.js，我们可以轻松实现一个动态响应用户点击的导航菜单。下面是一个简单的示例，展示了如何使用 Vue.js 实现导航菜单的选中状态切换。

<div id="main">
  <nav :class="{ active: isActive }" @click.prevent>
    <a href="#" class="home" @click="makeActive('home')">首页</a>
    <a href="#" class="projects" @click="makeActive('projects')">项目</a>
    <a href="#" class="services" @click="makeActive('services')">服务</a>
    <a href="#" class="contact" @click="makeActive('contact')">联系我们</a>
  </nav>

<p>您选择了 <b>{{ active }}</b> 菜单</p>
</div>

<script>
const app = new Vue({
  el: '#main',
  data: {
    active: 'home',
    isActive: false
  },
  methods: {
    makeActive(item) {
      this.active = item;
      this.isActive = true;
    }
  }
});
</script>

解析

  1. 模板部分：

    • nav 元素绑定了一个 :class 属性，根据 isActive 的值动态添加或移除 active 类。
    • 每个 a 链接绑定了 @click 事件，点击时调用 makeActive 方法，并传入当前菜单项的标识。
    • @click.prevent 用于阻止链接的默认行为，避免页面跳转。

  2. Vue 实例：

    • data 对象中定义了 active 和 isActive 两个属性，分别用于存储当前选中的菜单项和是否激活的状态。
    • methods 对象中定义了 makeActive 方法，用于更新 active 和 isActive 的值。

文本编辑：动态显示和隐藏编辑框

在许多应用中，允许用户直接编辑文本是一个常见的需求。通过 Vue.js，我们可以轻松实现这一功能。下面是一个示例，展示了如何在点击文本时显示编辑框，并在编辑完成后隐藏编辑框。

<div id="main" v-cloak @click="hideTooltip">
  <div class="tooltip" @click.stop v-if="showTooltip">
    <input type="text" v-model="textContent" />
  </div>
  <p @click.stop="toggleTooltip">{{ textContent }}</p>
</div>

<script>
const app = new Vue({
  el: '#main',
  data: {
    showTooltip: false,
    textContent: '点击我并编辑内容'
  },
  methods: {
    hideTooltip() {
      this.showTooltip = false;
    },
    toggleTooltip() {
      this.showTooltip = !this.showTooltip;
    }
  }
});
</script>

解析

  1. 模板部分：

    • div 元素绑定了 v-cloak 指令，防止未编译的变量显示在页面上。
    • tooltip 元素绑定了 v-if 指令，根据 showTooltip 的值决定是否显示。
    • input 元素绑定了 v-model 指令，实现了双向数据绑定。
    • p 元素绑定了 @click.stop 事件，点击时调用 toggleTooltip 方法，并阻止事件冒泡。

  2. Vue 实例：

    • data 对象中定义了 showTooltip 和 textContent 两个属性，分别用于控制编辑框的显示和存储文本内容。
    • methods 对象中定义了 hideTooltip 和 toggleTooltip 方法，用于更新 showTooltip 的值。

订单列表：动态计算总价

在电商应用中，订单列表的总价计算是一个常见的功能。通过 Vue.js，我们可以轻松实现这一功能。下面是一个示例，展示了如何创建一个订单列表，并动态计算总价。

<form id="main" v-cloak>

<h1>服务</h1>

<ul>
    <li v-for="service in services" @click="toggleActive(service)" :class="{ active: service.active }">
      {{ service.name }} <span>{{ service.price | currency }}</span>
    </li>
  </ul>
  <div class="total">总计: <span>{{ total() | currency }}</span></div>
</form>

<script>
Vue.filter('currency', function(value) {
  return '$' + value.toFixed(2);
});

const app = new Vue({
  el: '#main',
  data: {
    services: [
      { name: 'Web 开发', price: 300, active: true },
      { name: '设计', price: 400, active: false },
      { name: '集成', price: 250, active: false },

      { name: '培训', price: 220, active: false }
    ]
  },
  methods: {
    toggleActive(service) {
      service.active = !service.active;
    },
    total() {
      let total = 0;
      this.services.forEach(service => {
        if (service.active) {
          total += service.price;
        }
      });
      return total;
    }
  }
});
</script>

解析

  1. 模板部分：

    • ul 元素使用 v-for 指令遍历 services 数组，生成列表项。
    • 每个 li 元素绑定了 @click 事件，点击时调用 toggleActive 方法，并根据 active 属性动态添加或移除 active 类。
    • span 元素使用 | currency 过滤器格式化价格。
    • div 元素显示总价，使用 total 方法计算并格式化。

  2. Vue 实例：

    • data 对象中定义了 services 数组，存储了服务项的信息。
    • methods 对象中定义了 toggleActive 和 total 方法，分别用于切换服务项的选中状态和计算总价。
    • Vue.filter 用于定义全局过滤器 currency，格式化价格。

搜索页面：动态过滤列表

在许多应用中，搜索功能是必不可少的。通过 Vue.js，我们可以轻松实现一个动态过滤列表的搜索功能。下面是一个示例，展示了如何在输入框中输入搜索内容，并动态过滤列表项。

<form id="main" v-cloak>
  <div class="bar">
    <input type="text" v-model="searchString" placeholder="输入搜索内容" />
  </div>

<ul>
    <li v-for="article in filteredArticles">
      <a :href="article.url">
        <img :src="article.image" />
      </a>

<p>{{ article.title }}</p>
    </li>
  </ul>
</form>

<script>
const app = new Vue({
  el: '#main',
  data: {
    searchString: '',
    articles: [
      { title: 'CSS 变量你需要知道的', url: 'https://www.runoob.com/css/css-tutorial.html', image: 'https://static.jyshare.com/images/icon/css.png' },
      { title: '免费的 4 个漂亮的定价表', url: 'https://www.runoob.com/html/html-tutorial.html', image: 'https://static.jyshare.com/images/icon/html.png' },
      { title: '2016 年 2 月最有趣的 JavaScript 和 CSS 库', url: 'https://www.runoob.com/css3/css3-tutorial.html', image: 'https://static.jyshare.com/images/icon/css3.png' },
      { title: '快速提示：响应式头部的最简单方法', url: 'https://www.runoob.com/css3/css3-tutorial.html', image: 'https://static.jyshare.com/images/icon/css3.png' },
      { title: '20 分钟学会 SQL', url: 'https://www.runoob.com/sql/sql-tutorial.html', image: 'https://static.jyshare.com/images/icon/sql.png' },
      { title: '使用 HTML、JS 和 Electron 创建第一个桌面应用', url: 'https://www.runoob.com/js/js-tutorial.html', image: 'https://static.jyshare.com/images/icon/html.png' }
    ]
  },
  computed: {
    filteredArticles() {
      if (!this.searchString) {
        return this.articles;
      }
      const searchString = this.searchString.trim().toLowerCase();
      return this.articles.filter(article => article.title.toLowerCase().includes(searchString));
    }
  }
});
</script>

解析

  1. 模板部分：

    • input 元素绑定了 v-model 指令，实现了双向数据绑定。
    • ul 元素使用 v-for 指令遍历 filteredArticles 数组，生成列表项。
    • 每个 li 元素显示文章的标题和图片。

  2. Vue 实例：

    • data 对象中定义了 searchString 和 articles 两个属性，分别用于存储搜索内容和文章列表。
    • computed 对象中定义了 filteredArticles 计算属性，根据 searchString 动态过滤文章列表。

切换不同布局：动态调整页面布局

在许多应用中，允许用户切换不同的页面布局是一个常见的需求。通过 Vue.js，我们可以轻松实现这一功能。下面是一个示例，展示了如何通过点击按钮切换不同的页面布局。

<form id="main" v-cloak>
  <div class="bar">

    <a class="list-icon" :class="{ active: layout === 'list' }" @click="layout = 'list'"></a>
    <a class="grid-icon" :class="{ active: layout === 'grid' }" @click="layout = 'grid'"></a>
  </div>
  <ul v-if="layout === 'grid'" class="grid">
    <li v-for="article in articles">
      <a :href="article.url" target="_blank" rel="noopener noreferrer">
        <img :src="article.image.large" />
      </a>
    </li>
  </ul>
  <ul v-if="layout === 'list'" class="list">
    <li v-for="article in articles">
      <a :href="article.url" target="_blank" rel="noopener noreferrer">
        <img :src="article.image.small" />
      </a>

<p>{{ article.title }}</p>
    </li>
  </ul>
</form>

<script>
const app = new Vue({
  el: '#main',
  data: {
    layout: 'grid',
    articles: [
      { title: 'HTML 教程', url: 'https://www.runoob.com/html/html-tutorial.html', image: { large: 'https://static.jyshare.com/images/mix/htmlbig.png', small: 'https://static.jyshare.com/images/icon/html.png' } },
      { title: 'CSS 教程', url: 'https://www.runoob.com/css/css-tutorial.html', image: { large: 'https://static.jyshare.com/images/mix/cssbig.png', small: 'https://static.jyshare.com/images/icon/css.png' } },
      { title: 'JavaScript 教程', url: 'https://www.runoob.com/js/js-tutorial.html', image: { large: 'https://static.jyshare.com/images/mix/jsbig.png', small: 'https://static.jyshare.com/images/icon/js.png' } }
    ]
  }
});
</script>

解析

  1. 模板部分：

    • div 元素包含两个按钮，分别用于切换列表布局和网格布局。
    • 每个按钮绑定了 :class 属性，根据 layout 的值动态添加或移除 active 类。
    • ul 元素使用 v-if 指令根据 layout 的值选择显示列表布局或网格布局。
    • 列表布局显示文章的标题和小图，网格布局显示文章的大图。

  2. Vue 实例：

    • data 对象中定义了 layout 和 articles 两个属性，分别用于存储当前布局和文章列表。

总结

通过以上五个实例，我们详细介绍了如何使用 Vue.js 实现导航菜单、文本编辑、订单列表、搜索页面和布局切换等功能。希望这些示例能帮助你更好地理解和应用 Vue.js，提升你的开发效率。如果你有任何问题或建议，欢迎在评论区留言交流。