vue2.0v-for循环，然后根据值来设置变量为不同的值。 

<!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>

 

posted @ 2017-08-28 11:46  华~静看一季花开花落  阅读(7528)  评论(0)    收藏  举报