Vue实现搜索 和新闻列表功能简单范例

1. Vue实现搜索功能简单范例

为了实现搜索功能，我们需要在Vue组件中引入双向绑定v-model和v-on指令，并绑定一个输入框元素，如下所示：

<template>
  <div>
    <input type="text" v-model="searchTerm" v-on:change="search"/>
    <ul>
      <li v-for="(item,index) in searchResults" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchTerm: '',
        itemList: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']
      }
    },
    computed: {
      searchResults() {
        return this.itemList.filter((item) => {
        return item.includes(this.searchTerm)
        })
      }
    },
    methods: {
      search() {
        this.$emit('search-event', this.searchTerm)
      }
    }
  }
</script>

在这个例子中，我们通过v-model将输入框元素与searchTerm绑定，通过v-on指令监听输入框的值改变事件，当我们在输入框中输入搜索关键字，会实时更新searchTerm。在computed属性中，我们通过使用Array的filter方法，将itemList中符合搜索关键字的项过滤出来，并保存在searchResults数组中。最后，在search方法中，我们使用$emit方法来触发search-event事件，并将搜索结果传递出去供其他组件使用。

1. Vue实现新闻列表功能简单范例

为了实现新闻列表功能，我们可以使用Vue的组件化架构，将新闻列表封装成一个单独的组件，如下所示：

<template>
  <div>
    <h2>{{title}}</h2>
    <ul>
      <li v-for="(item,index) in newsList" :key="index">
        <a :href="item.link">{{item.title}}</a>
        <p>{{item.description}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      title: String,
      newsList: Array
    }
  }
</script>

在这个组件中，我们通过props接收外部传递进来的title和newsList数据，然后在组件内部遍历newsList数组，将每条新闻的title和description显示在页面上。注意的是，在template中使用v-for指令循环渲染列表项时，需要使用动态的key属性，来保证每条新闻列表项的唯一性。

在父组件中，我们可以通过axios库获取到后端返回的JSON格式新闻列表数据，并通过props的方式将title和newsList传递给子组件进行渲染。

<template>
  <div>
    <NewsList title="今日新闻" :newsList="newsList"></NewsList>
  </div>
</template>

<script>
import axios from 'axios';
import NewsList from './components/NewsList.vue';

export default {
  name: 'app',
  components: {
    NewsList
  },
  data() {
    return {
      newsList: []
    }
  },
  created() {
    axios.get('/news')
        .then((response) => {
          this.newsList = response.data;
        })
        .catch((error) => {
          console.log('Error fetching news list:', error);
        });
  }
}
</script>

在这个例子中，我们在父组件中引入NewsList组件，并将newsList通过props传递给子组件进行渲染。通过在created钩子中使用axios库，我们可以访问后端的/news路由，获取到返回的新闻列表数据，并将其赋值给newsList，以便父组件传递给子组件进行渲染。