什么是vue

什么是vue Vue.js是什么？(3)

时间：2024-01-24 21:00:29 来源：IT袋作者：马勇

导读：什么是vue，!DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>条件渲染/title>/head>body> div id="div"> !-- 示例1：使用v-

什么是vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!--
  示例1：使用v-if控制div标签显示
    有四个条件：type值等于A或B或C或D，则显示"优秀"或"良好"或"及格"或"不及格"所在的div
-->
        <div v-if="type=='A'">优秀</div>
        <div v-else-if="type=='B'">良好</div>
        <div v-else-if="type=='C'">及格</div>
        <div v-else>不及格</div>
        <!--
        示例2：使用v-show控制div显示与隐藏
        -->
        <div v-show="type=='A'">优秀</div>
        <div v-show="type=='B'">良好</div>
        <div v-show="type=='C'">及格</div>
        <div v-show="type=='D'">不及格</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /*
    * 目标：讲解if条件表达式
    * if语法：
    *   <标签名 v-if="条件">标签体</标签名>  条件成立标签存在，否则整个标签会被删除
    *   <标签名 v-else-if="条件">标签体</标签名>  条件成立标签存在，否则整个标签会被删除
    *   <标签名 v-else="条件">标签体</标签名>  上面的条件都不成立就会这个成立，这个标签就会存在，否则整个标签会被删除
 * show语法：      
 * <标签名 v-show="true">标签体</标签名>  设置标签显示
    *    <标签名 v-show="false">标签体</标签名> 设置标签不显示
 * 
    * v-if与v-show区别：
 * 相同点：都是控制元素是否显示
 * 不同点：底层原理不一样
 *  v-if 如果条件为false，页面中根本没有这个元素
 *  v-show如果条件为false，页面中有这个元素只不过它的display属性值为none
    * */
    new Vue({
        el:"#div",
        data:{
            type:"B"
        }
    });
</script>
</html>

3.3、v-for

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
</head>
<body>
<div id="div">
    <!--v-for：列表渲染，遍历容器的元素或者对象的属性。-->
    <h3>v-for循环方式1：固定循环次数</h3><!--
          语法：<标签名 v-for="变量名 in 整数">{{num}}</标签名>
          示例：输出5遍hello world
        -->
        <div v-for="i in 5">{{i}}</div>
    <h3>v-for循环方式2：遍历普通数组</h3><!--
          语法：<标签名 v-for="变量名 in 数组">{{element}}</标签名>
          示例：遍历的数组：names:["张三","李四","王五"]，输出打印格式：姓名：xxx
         -->
        <div v-for="name in names">{{name}}</div>
    <h3>v-for循环方式3：遍历对象数组</h3><!--
          语法：<标签名 v-for="element in 对象数组">{{element}}</标签名>
               element含义：遍历对象数组中每个对象
          示例：遍历对象数组，对象数组如下，输出格式：姓名,年龄
                 students:[
                        {name:"张三",age:23},
                        {name:"李四",age:25},
                        {name:"王五",age:28}
                    ]
        -->
  <div v-for="student in students">name:{{student.name}}，age:{{student.age}}</div>
    <h3>v-for循环方式4：遍历对象数组带索引</h3><!--
         语法：<标签名 v-for="(element,i) in 对象数组">{{element}}</标签名>
              element含义：遍历的数组中每个元素对象
              i含义：循环的索引
         示例：遍历对象数组，对象数组如下，输出格式：姓名,年龄,索引
                 students:[
                        {name:"张三",age:23},
                        {name:"李四",age:25},
                        {name:"王五",age:28}
                    ]
        -->
        <div v-for="(student,index) in students">name:{{student.name}}，age:{{student.age}},index:{{index}}</div>
    
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            },
            students:[
                {name:"张三",age:23},
                {name:"李四",age:25},
                {name:"王五",age:28}
            ]
        }
    });
</script>
</html>