Vue的条件渲染和对象渲染

条件渲染

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)

• v-if

  条件判断使用 v-if 指令

• v-else

  v-else 指令给 v-if 添加一个 “else” 块

• v-else-if

  用作 v-if 的 else-if 块

• v-show

  使用v-show 指令显示和隐藏元素，与v-if最大区别在于v-show不删除元素

    <div id="app">
        
        <div v-if="bool2">111</div>  <!-- bool2为false,则销毁本行代码,不显示-->
        <!-- if  else -->
        <div v-if="bool2">v-if</div>  
        <div v-else>else</div>   <!-- 如果上面的if语句执行成功,则默认忽略本行代码,不显示-->
        <!-- 多重渲染的写法 -->
        <div v-if="type == 'A'">A</div>
        <div v-else-if="type == 'B'">B</div>
        <div v-else>daqiu</div>

        <!-- v-show="bool":true显示  false隐藏display：none -->
        <div v-show="bool2">v-show</div> 
        
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                bool1: true,
                bool2: false,
                type: 'D'
            }
        })
    </script>

列表与字典对象渲染

通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象

语法格式： v-for= ‘’ item in items"

    <div id="app">
        <!--  v-for="临时变量  in 列表" -->
        <ul>
            <li v-for="i in list1">{{ i }}</li>
            <!--遍历list1将每一个元素组成一行<li>标签代码-->
        </ul>
        <ul>
            <!-- 1:数据；2：下标 -->
            <!-- <li v-for="(1, 2) in list"></li> -->
            <li v-for="(i, j) in list1">{{j+1}}、{{i}}</li>
        </ul>
        <ul>
            <!-- js对象(字典) -->
            <!-- i 表示的是value -->
            <li v-for="i in dict1">{{ i }}</li>
        </ul>
        <ul>
            <!-- 注意,第一个为值 ,第二个为键   (使用 键:值  的时候要把参数反过来)-->
            <li v-for="(value, key) in dict1">{{key}}:{{value}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                // 数组
                list1: ['朱毅', '王金泉', '林招亮'],
                // 字典对象
                dict1:{'name':'小张','age':30}
            }
        })
    </script>

绑定表单数据

v-model 指令用于设置表单控件value属性值

数据双向绑定：当数据发生变化的时候,视图也就发生变化,当视图发生变化时,数据也会跟着同步变化

• 文本输入框、下拉框框架绑定

    <div id="app">
        <!-- v-model的值用于设置表单控件value属性值-->
        <input type="text" v-model="txt1">
        <div>{{txt1}}</div>
        <select v-model="sel1">  <!--绑定sel1,默认值为data中定义的0-->
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
        </select>
        <div>{{sel1}}</div>  <!--只要下拉框中绑定的sel1改变,会及时刷新显示-->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                txt1: '默认值',
                sel1: 0
            }
        })
    </script>

• 单选框、复选框数据绑定

<div id="app">
    <div>{{myradio}}</div>
    性别：
    <!-- 单选框绑定-->
    <input type="radio" name="names" v-model="myradio" value="nan"> 男
    <input type="radio" name="names" v-model="myradio" value="nv"> 女
    <div>{{list1}}</div>
    兴趣爱好：
    <input type="checkbox" value="read" v-model="list1"> 读书
    <input type="checkbox" value="bahe" v-model="list1"> 拔河
    <input type="checkbox" value="lol" v-model="list1"> lol
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            myradio: 'nan',
            list1: ['bahe']
        }
    })

</script>