1.条件判断]

v-if
v-else-if
v-else

v-show
如果 判断是false
v-show 给标签加了一个 display:none
v-if 直接不编译

 <div id="root">
        <p v-show="flog">这是v-show</p>
        <p v-if="flog">这是v-if</p>
      
        <p v-if="score > 90">学霸</p>
        <p v-else-if="score > 60">合格</p>
        <p v-else>学渣</p>
 </div>
<script>
 //阻止生产提示
    Vue.config.productionTip = false;

    let vm = new Vue({
        el: '#root',
        data: {
            flog : false,//要想显示p标签，将这里的false改为true
            score : 61,
    })
</script>

2、循环语句

循环 json数组时，key就是每一条对象的索引值 val就是每一条对象的值

循环json对象 时，有三个参数(三个参数顺序固定)

• 1、val 键值对的值
• 2、key 键值对的键
• 3、i 这是第几条键值对 ，从0开始一次递增

注意！！：

因为在vue框架中为避免for循环 重复渲染
所以需要在for循环加一个属性 key
key中的值 不能重复
通常在渲染的时候 key都是 id
写 v-for 的时候 必须写 :key="key"

 <div id="root">
        <!-- 循环语句 -->
        <ul>
            <li v-for="(val,key) in book">
                <p>{{key}}</p>
                <p>{{val.name}}</p>
                <p>${{val.price}}</p>
            </li>
        </ul>

        <ul>
            <li v-for="(val,key,i) in obj">
                <p>{{i}}</p>
                <p>{{key}}</p>
                <p>{{val}}</p>
            </li>
        </ul>
</div>
<script>
    //阻止生产提示
    Vue.config.productionTip = false;

    let vm = new Vue({
        el: '#root',
        data: {
            book : [
                {
                    name : '西游记',
                    price : 110,
                },
                {
                    name : '水浒传',
                    price : 120,
                },
                {
                    name : '三国演义',
                    price : 119,
                },
                {
                    name : '红楼梦',
                    price : 112,
                },
            ],

            obj : {
                username : '老八秘制',
                password : '小汉堡',
                sex : '女',
                age : 22,
                phone : 1234567,
            }
        },
    })
</script>