vue向组件传递computed之后的值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test Document</title>
</head>
<body>
<div id="app">
{{message}}<br>
{{list}}<br>
{{small_list}}<br>
{{big_list}}<br>
<hr>
<component-one :list="small_list" title="A"></component-one>
<component-one :list="big_list" title="B"></component-one>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script id="templete_1" type="text/x-template">
<div>
<h1>{{title}}</h1>
<ul>
<li v-for="(item, key) in list">{{item}}</li>
</ul>
</div>
</script>
<script>
Vue.component('component-one', {
data: function () {
return {
count: 0,
}
},
props:['list','title'],
template: '#templete_1'
})
const app = new Vue({
el: '#app',
data: {
message: "hello world",
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
computed: {
small_list: function () {
let vm = this;
let list = new Array();
vm.list.forEach((item, i) => {
if (item <= 5) {
list.push(item);
}
})
return list;
},
big_list: function () {
let vm = this;
let list = new Array();
vm.list.forEach((item, i) => {
if (item > 5) {
list.push(item);
}
})
return list;
}
}
})
</script>
</body>
</html>
