6.vue中的条件渲染&列表渲染

作者: yaoyao妖妖 | 来源:发表于2018-07-07 12:22 被阅读8次

6.vue中的条件渲染&列表渲染
art-template
条件渲染与列表渲染
条件渲染与列表渲染
列表渲染与条件渲染
条件渲染和列表渲染
React 列表渲染&条件渲染（3）
条件列表渲染
react 普通渲染、条件渲染、列表渲染
小程序之WXML

1.vue中的条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue条件渲染</title>
    <!--引入/vue.js-->
    <script src="./vue.js"> </script>
</head>
<body>
   <div id="app">
    <!-- v-if="show"根据show变量的boolen值判断这个Dom是否显示，false时根本不存在dom -->
    <!-- v-if和v-else要紧贴着使用 -->
       <div v-if="show" > {{message}} </div>
       <div v-else> Bye World </div>

    <!-- v-show="show"根据show变量的boolen值判断这个Dom是否显示，false时存在dom，只是display隐藏，效率更高 -->
       <div v-show="show" data-test="v-show"> {{message}} </div>

    <!-- 三者要紧贴着使用 -->
       <div v-if="show === 'a'" > This is a</div>
       <div v-else-if="show === 'b'"> This is b </div>
       <div v-else > This is others</div>

       <!-- key值 防止因为复用Dom出现的内容没有清空-->
       <div v-if="show" > 用户名:<input key="username"/> </div>
       <div v-else> 邮箱名:<input key="youxiang"/> </div>

   </div>

   <script>

       var app = new Vue({
           el:'#app',  

           data:{//定义一组数据
            show:false,
            message:"hello world"

           },
           methods:{
            handleDivClick:function(){

            }

           }

       })
   </script>

</body>

</html>

2.vue中的列表渲染&dom循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue列表渲染</title>
    <!--引入/vue.js-->
    <script src="./vue.js"> </script>
</head>
<body>
   <div id="app">
       <!-- 尽量不要使用index作为key值 -->
       <div v-for="(item,index) of list" 
            :key="item.id">{{item.text}}---{{index}}

       </div>

    <!-- template在这里只是一个占位符，包裹里面的循环内容，但是并不会多一个div的壳子 -->
    <template v-for="(item,index) of list" 
               :key="item.id"> 
       <span>{{item.text}}</span>
       <div>{{item.text}}</div>
    </template>


   </div>

   <script>
//1.在vue中只能通过下面7个方法操作数组才能实现实时的更改页面对应的值
//push加入一个元素   pop删除一个元素 shift  unshift   splice截取数组    sort数组排序   reverse数组取反

//2.或者改变引用
//app.list= 一个新的数组

//3.或者set方法
//app.$set(app.userInfo,"address","Beijing")对象
//app.$set(app.userInfo,1，5)下标为1，数组
//Vue.set(app.userInfo,1，5)
           el:'#app',  

           data:{
               list:[{
                   id:"0000",
                   text:"hello"
                },
                {
                   id:"0001",
                   text:"dell"
                },
                {
                   id:"0002",
                   text:"nice"
                },
                {
                   id:"0003",
                   text:"to"
                },
                {
                   id:"0004",
                   text:"meet"
                },
                {
                   id:"0005",
                   text:"you"
                }],              
        },
           methods:{
            handleDivClick:function(){

            }
           }
       })

   </script>

</body>

</html>

3.对象循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue对象循环</title>
    <!--引入/vue.js-->
    <script src="./vue.js"> </script>
</head>
<body>
   <div id="app">
       <!-- 尽量不要使用index作为key值 -->
       <div v-for="(item,key,index) of userInfo">
           {{item}}-- {{key}}--- {{index}}
       </div>

   </div>

   <script>

       var app = new Vue({
           el:'#app',  

           data:{
            userInfo:{
                name:"dell",
                sex:"man",
                age:28
            }
                        
        },
           methods:{
            handleDivClick:function(){

            }

           }

       })

   </script>

</body>

</html>