vue内最为常见的标签无疑是v-for

先来看看官网使用方法

<div v-for="item in items" >
  {{ item.text }}</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：

<div v-for="item in items" :key="item.id">
  {{ item.text }}</div>

key最好需要选择为不重复的值，那么列表文章的ID最为合适了

调用方法

标签外

{{ item.text }}

标签内:注意别漏掉冒号

<img v-bind:src="item.src">
<img :src="item.src" /> //缩写
<img :src="item.host+item.src" /> //2个属性

方法内

<span v-if="item.flag">

小技巧1

上面涉及到一个重新处理！

我们知道v-if是判断true和false的！

如果为true就显示！

但是我们后端返回给我们的很多时候并不是true，

那么则需要我们去判断了！

首先把值传入一个函数内： 我随便写的flag

<span v-if="flag(item.flag)">

那么我们可以增加函数 flag 然后判断传入的值后 return 回 状态

methods: {
  flag: function (value) {
      return (value.indexOf('h') !== -1) // 如果携带了h则返回true
   }
}

小技巧2

同样是上面的，有时候后端给我们返回的一个是

xhcss,xh,小贺

以逗号区分的字符串

但是我们需要循环输出成

<p><span class="layui-badge layui-bg-green">xhcss</span> <span class="layui-badge layui-bg-blue">xh</span> <span class="layui-badge layui-bg-orange">小贺</span></p>

这样那么我们应该怎么做呢

这时候同样需要用到上面的类似方法,代码如下

<p>
<span  v-for="tag in tags(item.tags)" class="layui-badge  layui-bg-green">{{tag}}</span>
<p>

我们把item.tags用函数tags变成数组再返回到v-for内再循环输出

methods: {
  tags: function (tags) {
     var tags_arr = new Array();
     tags_arr = tags.split(",");// 以逗号分隔转化为数组
     return tags_arr
   }
}

好了！有更新会及时更新！