<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="vue-2.4.1.min.js"></script>
<body>
<div>
<div id="todo-list-example">
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:item="todo.text"
></li>
</ul>
</div>
</div>
</body>
<script>
Vue.component('todo-item', {
template: '<li>{{xianshi(item)}}</li>',
props: ['item'],
data:function(){
return{
value:''
}
},
methods:{
xianshi:function(item){
if(item=='Do the dishes'){
return '1111111111111111111111';
}
else if(item=='Take out the trash'){
return '2222222222222222222222';
}
else if(item=='Mow the lawn'){
return '33333333333333333333';
}
}
}
})
new Vue({
el: '#todo-list-example',
data: {
todos: [
{text:'Do the dishes'},
{text:'Take out the trash'},
{text:'Mow the lawn'},
]
},
methods: {
}
})
</script>
</html>
