Vue表单控件_ele.bookname.tolowercase().indexof(searchstr) != --优快云博客

本文链接：https://blog.youkuaiyun.com/2301_80278139/article/details/144501576

1、绑定单行文本框

books.filter(function(ele){ ... })：使用 filter 方法遍历 books 数组，返回一个新数组，其中包含符合条件的元素。
ele.bookname.toLowerCase().indexOf(searchStr) != -1：将每个图书对象的 bookname 属性转换为小写，并检查其是否包含 searchStr 关键字。如果包含，则 indexOf 方法返回一个非 -1 的值，表示该图书符合过滤条件。
return ele;：如果图书名称包含搜索关键字，则将该图书对象返回到新数组中。

总结：这段代码用于根据用户输入的搜索关键字 searchStr 过滤 books 数组，返回一个新的数组，其中只包含图书名称中包含搜索关键字的图书。

<style>
body{
font-family:微软雅黑}
.search input{
width:350px;
height:30px;}
.item{
width:350px;
height:100px;
line-height:100px;
border-bottom:1px solid #999999;}
.item img{
width:100px;
float:left}
.item span{
height:100px;
line-height:100px;
}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<div class="search">
		<input type="text" v-model="searchStr" placeholder="请输入搜索内容">
	</div>
	<div>
		<div class="item" v-for="book in results">
			<img :src="book.image">
			<span>{
  {book.bookname}}</span>
		</div>
	</div>
</div>
<script type="text/javascript">
var exam = new Vue({
	el:'#example',
	data:{
		searchStr : '',//搜索关键字
		books : [{//图书信息数组
			bookname : '零基础学JavaScript',
			image : 'images/javascript.png'
		},{
			bookname : '零基础学HTML5+CSS3',
			image : 'images/htmlcss.png'
		},{
			bookname : '零基础学C语言',
			image : 'images/c.png'
		},{
			bookname : 'JavaScript精彩编程200例',
			image : 'images/javascript200.png'
		},{
			bookname : 'HTML5+CSS3精彩编程200例',
			image : 'images/htmlcss200.png'
		},{
			bookname : 'Java精彩编程200例',
			image : 'images/java200.png'
		}]
	},
	computed : {
		results : function(){
			var books = this.books;
			if(this.searchStr == ''){
				return books;
			}
			var searchStr = this.searchStr.trim().toLowerCase();//去除空格转换为小写
			books = books.filter(function(ele){
				//这里的ele是指books数组中的每一个元素
				//判断图书名称是否包含搜索关键字
				if(ele.bookname.toLowerCase().indexOf(searchStr) != -1){
					return ele;
				}
			});
			return books;
		}
	}
})
</script>

2、多行文本框

和上面的一样的

3、单个复选框，这里的复选框是，这里绑定的是是否选中的布尔值

4、多个复选框也一样

这里用到了"checkedNames"的事件的监听

<style>
body{
font-family:微软雅黑}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<input type="checkbox" value="上网" v-model="checkedNames">
	<label for="net">上网</label>
	<input type="checkbox" value="旅游" v-model="checkedNames">
	<label for="tourism">旅游</label>
	<input type="checkbox" value="看书" v-model="checkedNames">
	<label for="book">看书