Vue.js组件传参案例

< html lang=" en">

< head>

< meta charset=" UTF-8">

< meta name=" viewport" content=" width=device-width, initial-scale=1.0">

< meta http-equiv=" X-UA-Compatible" content=" ie=edge">

< title>Documenttitle>

< script type=" text/javascript" src=" js/vue.min.js">script>

head>

< body>

< div id=" app">

< ul>

< li>

< hello v-for=" (item,index) in arr" v-bind:content=" item" v-bind:txtindex=" index">hello>

li>

ul>

div>

body>

< script>

// vue 组件传参数

Vue. component(' hello', {

template:'

{{txtindex}}{{content}}我是A

' ,

props: [' content',' txtindex'],

})

var app = new Vue({

el: ' #app',

data: {

arr:[" 打游戏"," 学习vue"," 买菜"]

},

})

script>

html>