Vue 笔记

2 、条件渲染 

注 ：

v-if ：不显示时，第一次就直接不渲染，如果是内容已经显示将其改为不显示，将内容直接从 DOM 去除，只是渲染一次的内容 用 v-if

   v-show ：不显示时，就会改为 display:none,但是会渲染在 DOM 上。反复需要切换内容 ，使用 v-show

 

v-if

v-else-if

v-else

 

HTML 代码 ：

复制代码
<!-- view (实例化部分) -->
        <div id="app">
            <h1>用户名：{{username}}</h1>
            <h3 v-if="isVIP">用户类型：VIP</h3>
            <!-- 注意：v-if 和 v-else 中间不能有其他元素 -->
            <h3 v-else>用户类型 : 普通用户</h3>
            
            <hr>
            
            <h1>用户允许登录时间</h1>
            <h3 v-if="age > 18">允许24小时登录</h3>
            <h3 v-else-if="age < 1">允许8小时登录</h3>
            <h3 v-else>允许4小时登录</h3>
            
            
            
        </div>
复制代码

JS 代码 ：

复制代码
<!-- Model (实例化) -->
        <script type="text/javascript">
            let app = new Vue({
                el:"#app",
                data:{
                    username:"小明",
                    isVIP:true,
                    age:17
                }
            })
            
        </script>
复制代码

tab 切换

HTML 代码 ：

复制代码
<!-- view (实例化部分) -->
        <div id="app">
            <h3 v-if="tab==1">首页</h3>
            <h3 v-else-if="tab==2">新闻</h3>
            <h3 v-else>个人</h3>
            
            
            <button @click="tabChange" data-id="1">首页</button>
            <button @click="tabChange" data-id='2'>新闻</button>
            <button @click="tabChange" data-id='3'>个人</button>
        </div>
复制代码

JS 代码 :

复制代码
<!-- Model (实例化) -->
        <script type="text/javascript">
            let app = new Vue({
                el:"#app",
                data:{
                    tab:1    // 默认显示首页
                },
                methods:{
                    tabChange:function(e){
                        // console.log(e.target.dataset.id)
                        let tabid = e.target.dataset.id
                        app.tab = tabid        // 等同于  this.tab = tabid
                        this.tab = tabid
                    }
                }
            })
            
        </script>
复制代码

v-show

HTML 代码 ：

 

<div id="app">
            <div v-show="isShow" id="pane">
                HelloVue
            </div>
            
            <button @click="showPane">切换显示内容</button>
        </div>

CSS 代码 ：

<style type="text/css">
            #pane{
                width: 200px;
                height: 200px;
                background:skyblue;
            }
        </style>

JS 代码 ：

复制代码
<script type="text/javascript">
            let app = new Vue({
                el:"#app",
                data:{
                    isShow:true
                },
                    methods:{
                        showPane:()=>{
                            app.isShow = !app.isShow;
                        },
                    },
            })
        </script>
复制代码

3 、列表循环

V-for

HTML 代码 ：

复制代码
<div id="app">
            <h3>明细列表</h3>
            <ul>
                
                <li v-for="item in stars">
                    {{item}}
                </li>
            </ul>
            <h3>学生列表</h3>
            <ul>
                <li v-for="item in students">
                    <h4>学生姓名 : {{item.studentName}}</h4>
                    <h4>年龄 : {{item.age}}</h4>
                    <h4>学校 ：{{item.school}}</h4>
                </li>
            </ul>
            <!-- 带索引值-->
            <h3>学生列表</h3>
            <ul>
                <li v-for="item , key in students" :key="key">
                    <h4>索引值 ： {{key}}---学生姓名 : {{item.studentName}}</h4>
                    <h4>年龄 : {{item.age}}</h4>
                    <h4>学校 ：{{item.school}}</h4>
                </li>
            </ul>
            
            <h3>循环对象</h3>
            <!-- 拿出 students 为 0 的内容  和 key 值 -->
            <ul>
                <li v-for="item , key in students[0]">key:{{key}}----value:{{item}}</li>
            </ul>
            
            <!-- 将偶数年龄是学生筛选出来 -->
            <h3>条件+循环渲染 （将偶数年龄是学生筛选出来），先循环后判断</h3>
            <ol>                                    
                <li v-for="item , key in students" v-if="item.age%2==0" :key="key">                                                    
                    <h4>索引值 : {{key}}----{{item.studentName}}</h4>
                    <p>年龄 ：{{item.age}}---学校：{{item.school}}</p>
                </li>
            </ol>
            
            <!-- 获取头像图片     src 前面得加冒号 （绑定属性）-->
            <h3>获取头像图片</h3>
            <img :src="students[0].imgheader" >
            
        </div>
复制代码

JS 代码 :

复制代码
<script type="text/javascript">
            let app = new Vue({
                el: "#app",
                data: {
                    stars: ["蔡徐坤姐姐", "范冰冰姐姐", "林志玲姐姐"],
                    students: [{
                            studentName: "小明",
                            age: 16,
                            school: "北大",
                            imgheader:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F3c%2F12%2F4c%2F3c124c5277386c897dad2977bb964ea1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644108278&t=d274d9ebe7ef777a02c77a195879c7c2"
                        },
                        {
                            studentName: "小白",
                            age: 19,
                            school: "哈大"
                        },
                        {
                            studentName: "小黑",
                            age: 10,
                            school: "新大"
                        },
                        {
                            studentName: "小黄",
                            age: 18,
                            school: "新大"
                        },
                    ],
                },
            })
        </script>
复制代码

 4 、模板语法

v-once  (一次性插入，不再修改)

<h1 v-once>{{变量}}</h1>

v-html （插入HTML内容）

<!-- 插入HTML内容 -->
<h1 v-html="变量"></h1>
<!-- 双大括号会将数据解释为普通文本，而非 HTML 代码 -->
<h1>{{变量}}</h1>

v-bind

　　　　　　<!-- 绑定动态属性，省略写法 -->
            <div :id="idname">
                <h1>登录</h1>
            </div>
　　　　　　<!-- 绑定动态属性，全写 -->
            <div v-bind:id="idname">
                <h1>登录</h1>
            </div>

模板语言的表达式应用

HTML 代码 ：

<div>{{firstname + lastname}}</div>

JS 代码 ：

let app = new Vue({
                el:"#app",
                data:{
                    firstname:"张",
                    lastname:"三"
                }
            })

输出结果 ：

 

三元运算符

 HTML 代码 ：

<div>
   {{isVIP?"欢迎VIP客户":"欢迎回来，请充值"}}
</div>

JS 代码 ：

let app = new Vue({
                el:"#app",
                data:{
                    isVIP:false 或者 true
                }
            })

绑定事件

1 <!-- 事件的绑定 --  全写-->
2    <button v-on:click="变量">改变背景</button>
3 <!-- 事件的绑定 --  简写-->
4    <button @click="变量">改变背景</button>
复制代码
let app = new Vue({
                el:"#app",
                data:{
                    
                },
                methods:{
                    changeBg:function(){
                        // 执行点击事件
                    }
                }
            })
复制代码

 

posted @   GGFWI  阅读(45)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue v-for 用法
·  Vue key 前面是否需要加冒号
·  Vue学习笔记18--条件渲染
·  vue学习笔记-2
·  Vue2入门之超详细教程十一-条件渲染
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手