• Javaweb之Vue指令的详细解析

    2.3.3 v-if和v-show

    指令描述
    v-if条件性的渲染某元素，判定为true时渲染,否则不渲染
    v-if-else
    v-else
    v-show根据条件展示某元素，区别在于切换的是display属性的值

    我们直接通过代码来演示效果。在VS Code中创建名为15. Vue-指令-v-if和v-show.html的文件，提前准备好如下代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Vue-指令-v-if与v-showtitle>
    8.     <script src="js/vue.js">script>
    9. head>
    10. <body>
    11.     <div id="app">
    12.         
    13.         年龄<input type="text" v-model="age">经判定,为:
    14.         <span>年轻人(35及以下)span>
    15.         <span>中年人(35-60)span>
    16.         <span>老年人(60及以上)span>
    17. ​
    18.         <br><br>
    19.     div>
    20. body>
    21. <script>
    22.     //定义Vue对象
    23.     new Vue({
    24.         el: "#app", //vue接管区域
    25.         data:{
    26.            age: 20
    27.         },
    28.         methods: {
    29.             
    30.         }
    31.     })
    32. script>
    33. html>

    其中采用了双向绑定到age属性，意味着我们可以通过表单输入框来改变age的值。

    需求是当我们改变年龄时，需要动态判断年龄的值，呈现对应的年龄的文字描述。年轻人，我们需要使用条件判断age<=35,中年人我们需要使用条件判断age>35 && age<60,其他情况是老年人。所以通过v-if指令编写如下代码：

    1. 年龄<input type="text" v-model="age">经判定,为:
    2. <span v-if="age <= 35">年轻人(35及以下)span>
    3. <span v-else-if="age > 35 && age < 60">中年人(35-60)span>
    4. <span v-else>老年人(60及以上)span>

    浏览器打开测试效果如下图：

    v-show和v-if的作用效果是一样的，只是原理不一样。复制上述html代码，修改v-if指令为v-show指令，代码如下：

    1. 年龄<input type="text" v-model="age">经判定,为:
    2. <span v-show="age <= 35">年轻人(35及以下)span>
    3. <span v-show="age > 35 && age < 60">中年人(35-60)span>
    4. <span v-show="age >= 60">老年人(60及以上)span>

    打开浏览器，展示效果如下所示：

    可以发现，浏览器呈现的效果是一样的，但是浏览器中html源码不一样。v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

    完整代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Vue-指令-v-if与v-showtitle>
    8.     <script src="js/vue.js">script>
    9. head>
    10. <body>
    11.     <div id="app">
    12.         
    13.         年龄<input type="text" v-model="age">经判定,为:
    14.         <span v-if="age <= 35">年轻人(35及以下)span>
    15.         <span v-else-if="age > 35 && age < 60">中年人(35-60)span>
    16.         <span v-else>老年人(60及以上)span>
    17. ​
    18.         <br><br>
    19. ​
    20.         年龄<input type="text" v-model="age">经判定,为:
    21.         <span v-show="age <= 35">年轻人(35及以下)span>
    22.         <span v-show="age > 35 && age < 60">中年人(35-60)span>
    23.         <span v-show="age >= 60">老年人(60及以上)span>
    24. ​
    25.     div>
    26. body>
    27. <script>
    28.     //定义Vue对象
    29.     new Vue({
    30.         el: "#app", //vue接管区域
    31.         data:{
    32.            age: 20
    33.         },
    34.         methods: {
    35.             
    36.         }
    37.     })
    38. script>
    39. html>

    2.3.4 v-for

    v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

    1. <标签 v-for="变量名 in 集合模型数据">
    2.     {{变量名}}

    需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。

    有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

    1. <标签 v-for="(变量名,索引变量) in 集合模型数据">
    2.     
    3.    {{索引变量 + 1}} {{变量名}}

    接下来，我们再VS Code中创建名为16. Vue-指令-v-for.html的文件编写代码演示，提前准备如下代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Vue-指令-v-fortitle>
    8.     <script src="js/vue.js">script>
    9. head>
    10. <body>
    11.     <div id="app">
    12. ​
    13.     div>
    14. body>
    15. <script>
    16.     //定义Vue对象
    17.     new Vue({
    18.         el: "#app", //vue接管区域
    19.         data:{
    20.            addrs:["北京", "上海", "西安", "成都", "深圳"]
    21.         },
    22.         methods: {
    23.             
    24.         }
    25.     })
    26. script>
    27. html>

    然后分别编写2种遍历语法，来遍历数组，展示数据，代码如下：

    1.  <div id="app">
    2.      <div v-for="addr in addrs">{{addr}}div>
    3.      <hr>
    4.      <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}div>
    5. div>

    浏览器打开，呈现如下效果：

  • 相关阅读:
    第十三章 配置 Apache 以与 Web 网关配合使用 (Windows) - 推荐选项：Apache API 模块 (CSPa24.dll)
    【LeetCode-中等题】79. 单词搜索
    1402. 做菜顺序 --力扣 --JAVA
    在普通频道输入字符串如果是pi,则给出信息~！
    1. Nginx 基本功能配置
    软件测试之如何提升产品的用户体验度
    .NET混合开发解决方案4 WebView2的线程模型
    qsort函数和模拟实现qsort函数
    QT_QDialog 对话框
    手把手教你在ARM板上写一个驱动程序！
  • 原文地址：https://blog.csdn.net/qq_69748833/article/details/134470333