_37

导航

1006imgbook

代码块(点击展开): <html> <head> <meta charset="utf-8" /> <title>第六周-imgbook</title> <style type="text/css"> .item { width: 350px; height: 100px; line-height: 100px; border-bottom: 1px solid #999999; } .item img { width: 100px; float: left; } </style> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head>
<body>
	<div id="app">
		<div>
			<input placeholder="item" v-model="searchStr" />
			<button type="button" @click="resultBooks()">搜索</button>
		</div>
		<div>
			<div class="item" v-for="book in books">
				<img :src="book.image" />
				<span>{{book.bookName}}</span>
			</div>
		</div>
	</div>
</body>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			books: [
				{
					bookName: "前段JavaScript",
					image: "img/c.png"
				},
				{
					bookName: "HTML入门",
					image: "img/c.png"
				},
				{
					bookName: "Java服务端编程",
					image: "img/c.png"
				},
				{
					bookName: "C语言基础",
					image: "img/c.png"
				},
				{
					bookName: "Java基础",
					image: "img/c.png"
				}
			],
			// searchStr:""
		},
		methods: {
			resultBooks: function() {
				var books = this.books;
				if (this.searchStr == '') {
					return books;
				}
				var searchStr = this.searchStr.trim().toLowerCase(); // 去除空格,小写
				books = books.filter(function(item) {
					if (item.bookName.toLowerCase().indexOf(searchStr) != -1) {
						// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
						// 如果没有找到匹配的字符串则返回 -1。
						return item;
					}
				});
				return books;
			}
		},
		computed: {
			
		},
		// watch:用于监听data里面的数据是否被修改,一旦修改就可以执行一些其他的操作【也是方法】
		watch: {

		}
	})
</script>

posted on 2022-10-06 20:40  _37  阅读(14)  评论(0编辑  收藏  举报