Vue基础使用 if for -bind

基本格式

 

 el绑定元素

data设置的变量

页面变量显示使用 ｛｛｝｝

 

v-bind:href 可以缩写成 :href，即使用:来代替v-bind  即href为动态可变的变量

v-if  判断  true 就显示 false 就不显示 也可以衔接 else if  else

循环使用：

<div id="app-4">

  <ol>

    <li v-for="todo in todos">

      {{ todo.text }}

    </li>

  </ol>

</div>

 

var app4 = new Vue({

  el: '#app-4',

  data: {

    todos: [

      { text: '学习 JavaScript' },

      { text: '学习 Vue' },

      { text: '整个牛项目' }

    ]

  }

})

其中v-for是一个循环指令，循环一个数组，todes是一个数组，todo是循环变量，通过循环变量获取值。

v-for 还支持一个可选的第二个参数，即当前项的索引。

<ul id="example-2">

  <li v-for="(item, index) in items">

    {{ parentMessage }} - {{ index }} - {{ item.message }}

  </li>

</ul>

 

var example2 = new Vue({

  el: '#example-2',

  data: {

    parentMessage: 'Parent',

    items: [

      { message: 'Foo' },

      { message: 'Bar' }

    ]

  }

})

// 结果：

// Parent 0  Foo

// Parent 1  Bar

你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法。