Vue的条件渲染和对象渲染
发布日期:2021-11-02 02:26:42 浏览次数:0 分类:技术文章

条件渲染

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

  • 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>
上一篇:Vue与服务端数据交互 [ axios ]
下一篇:Vue基础部分笔记