vue框架——循环判断

　　mvvm模型是基于mvc模型，vue是mvvm模型的实现者，model-view-model-view实现双向绑定，主要使视图与模型分离（前端数据改变那么data中的数据也会改变，data中的数据改变那么前端的数据也会改变），ViewModel封装了view层的状态与行为。因为主要是后端开发，vue框架仅仅是简单的学习，因此使用idea开发。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>//引用vue.js，百度vue cdn会出来一堆，min代表的是压缩版本，可以下载到本地后引用，这是调用在线文本

使用v-bind绑定：

<div id="app">
{{message}}
</div>
<div id="app2">
　　//绑定data中的message
    <span v-bind:title="message">书表悬停展示信息</span>
</div>
<!--导入vue.js-->
<!--<script src="/core/vue.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello.vue!"
        }
    });
    var vm2 = new Vue({
        el:"#app2",
        data:{
            message:"hello.vue!"
        }
    });
</script>

v-if语句：

<div id="app">
    <h1 v-if="ok === ‘A‘">A</h1>
    <h1 v-else-if="ok === ‘B‘">B</h1>
    <h1 v-else-if="ok ===‘C‘">C</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
   var vm = new Vue({
       el:"#app",
       data:{
           ok: "A"
       }
   });
</script>

v-for语句：

<div id="app">
//类似for（Item item：items），其中items绑定的是中data的items
<li v-for="（item，index） in items">
    {{item.message}}--{{index}}//index是自带的
</li>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            items:[
                {message:‘你好‘},
                {message:‘陈鸿柳‘}
            ]
        }
    });
</script>

vue框架——循环判断

原文：https://www.cnblogs.com/chll/p/13028751.html