vue 分支结构 循环结构

v-if、v-else,v-if-else,v-show

v-if、v-else,v-if-else渲染时只渲染满足条件的一条

v-show 只有ture和flase两个值,通过控制display来控制

条件判断语句写在html中例

<div id="app">

  <div v-if="score>=90">优秀</div>

  <div v-if-else="90>score&&score>=80">良</div>

  <div v-if-else="80>score&&score>=60">一般</div>

  <div v-else>很差</div>

</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{"
  score:99
        },
        methods:{
           
        }
    })
</script>

循环结构

v-for

如果数组包含的是对象数据,则插值表达式中用name.来输出

key的作用

帮助vue提供性能,可以用name.id,或者用index

遍历数组

<ul>

<li v-for=”(name,index) in arr">{{name+" “ +index}}</li>

</ul>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
  arr:["1","2","3"]
        },
        methods:{    }
    })
</script>
 
原文地址:https://www.cnblogs.com/marswenze/p/13026025.html