普通html引入vue,html引入vue搜索功能

效果图

Page Title

#app {

text-align: center;

}

table {

margin: 0 auto;

}

td {

width: 100px;

}

{{item.id}}

{{item.name}}

{{item.jn}}

var app = new Vue({

el: '#app',

data: {

sousuo: '',

list: [{

"id": 1,

"name": "后裔",

"jn": "射箭"

}, {

"id": 2,

"name": "妲己",

"jn": "魅惑"

}, {

"id": 3,

"name": "猴子",

"jn": "棍子"

}, ]

},

computed: { //设置计算属性

Search() {

if (this.sousuo) {

return this.list.filter((value) => { //过滤数组元素 this.list就是上面的那个死数据

return value.name.includes(this.sousuo); // 查看value.name里面包含不包含输入的字体

}); //this.sousuo跟上面的输入框是双重绑定

}

}

},

methods: {

sousuo1() {

if (!this.sousuo) {

return this.list;

}

return this.Search

}

},

})