Vue.js模板引擎的使用

在我们做项目的过程中，往往会遇到需要遍历的数据，并把数据绑定到特定的文本上，一般我们都会给它加个类或者一个id，在通过类或者id获取它的value值或者text值，但如果一个页面，它需要获取许多的值，并改变它的值得话。这就需要写许多的代码，为了减少代码量，我们可以适当的去使用一些插件，下面我就来介绍一下如何使用vue的模板引擎，首先，vue数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

 

下面我就通过一个实例来介绍vue的使用方法，下面是html代码：

<div id="app">

        <!-- 对象遍历 -->

        <div v-for="(value, key, index) in object">

            {{ index }}. {{ key }} - {{ value }}

        </div>

        <!-- 数组对象遍历 -->

        <div v-for="(value, key, index) in objectArray">

            姓名：{{value.name}}

            年龄:{{value.age}}

        </div>

    </div>

JavaScript代码：

  <script>

        var app = new Vue({

            el: '#app',

            data: {

                // 对象

                object: {

                    name: '张三',

                    names: '李四'

                },

                // 数组对象

                objectArray: [

                    {

                        name: '张三',

                        age: 14

                    },

                     {

                         name: '李四',

                         age: 18

                     }

                ]

            }

        })

</script>

最后就是数据的输出：