如何使用vuejs

时间:2016-06-01 08:56:41

标签: javascript vue.js vue-resource vue-component

fileds由服务器发布,数据也是表单服务器,我怎么能用vuejs绑定它们?我想要最后展示的是数据,而不是filedName。

<script>
    module.exports = {
        data: function () {
            return {
                filedNameFromServer: ['{{filed1}}', '{{filed2}}','{{filed3}}'],
                dataFromServer: {
                    filed1: 'value1',
                    filed2: 'value2',
                    filed3: 'value3'
                }
            }
        },
        methods: {

        }
    }
</script>
<template>
    <ul>
        <li v-for="filedName in filedNameFromServer">{{filedName}}</li>
    </ul>
    //which I want after compile
    <ul>
        <li>value1</li>
        <li>value2</li>
        <li>value3</li>
    </ul>
</template>

1 个答案:

答案 0 :(得分:2)

<script>
    module.exports = {
        data: function () {
            return {
                filedNameFromServer: ['filed1', 'filed2','filed3'],
                dataFromServer: {
                    filed1: 'value1',
                    filed2: 'value2',
                    filed3: 'value3'
                }
            }
        },
        methods: {

        }
    }
</script>

HTML:

<template>
    <ul>
        <li v-for="filedName in filedNameFromServer">
          {{ dataFromServer[filedName] }}
        </li>
    </ul>
    //which I want after compile
    <ul>
        <li>value1</li>
        <li>value2</li>
        <li>value3</li>
    </ul>
</template>

PS:filed应该是field,还是您的数据实际上是关于文件/归档?