Vue之V-html、v-if、v-show、v-for、列表与条件渲染

最新推荐文章于 2024-09-17 10:49:57 发布

男孩子小杨

最新推荐文章于 2024-09-17 10:49:57 发布

阅读量675

点赞数 2

分类专栏： vue.js 文章标签： vue vue.js V-if V-show v-for

本文链接：https://blog.csdn.net/qq_43495629/article/details/121440309

版权

vue.js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue学习记录（仅供个人复习使用）

提示：（仅供个人复习使用）

文章目录

Vue学习记录（仅供个人复习使用）
前言
一、学习知识点
二、相关截图
三、相关代码
总结

前言

提示：自我学习路线（仅供参考）

一、学习知识点

涉及的知识点如下：

v-html
v-show
v-if
v-else
v-else-if
v-for
:style
:class

二、相关截图

实例图片

三、相关代码

代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style type="text/css" rel="stylesheet">
    .yellow{
        background-color: yellow;
    }

    .red{
        background-color: red;
    }

    .a{
        background:black;
    }

    .b{
        background-color: blue;
    }

    .c{
        border: 10px solid darkgreen;
    }
</style>
<body>
    <div id="myDiv">
        {{10 +20}}
        <p>{{myName}}</p>

        {{myHtml}}

        <br>

        <div v-html="myHtml"></div>

        <div v-show="isShow">12346显示和隐藏</div>
        <div v-if="isCreated">9599创建和删除</div>

        <br>
        <div>三目运算符切换单一类</div>
        <div class="yellow">yellow</div>
        <button @click="handleClick()">click</button>
        <div :class="isActive?'red':'yellow'">red</div>

        <br>
        <div>对象法切换类</div>
        <div :class="classObj"></div>
        <button @click="classObjClick()">click</button>
        <div :class="classObj">red</div>

        <br>
        <div>数组法切换类</div>
        <button @click="classArrClick()">click</button>
        <div :class="classArr">数组类</div>

        <br>
        <div>内联样式切换类</div>
        <button @click="inLineStyleClick()">click</button>
        <div :style="'background:' + (inLineStyle?'red':'pink')">内联样式更改</div>

        <br>
        <div>内联样式对象切换</div>
        <button @click="inLineStyleObjClick()">click</button>
        <div :style="inLineStyleObj">内联样式对象切换</div>

        <br>
        <div>内联样式数组切换</div>
        <button @click="inLineStyleArrClick()">click</button>
        <div :style="inLineStyleArr">内联样式数组切换</div>
        <br>

        <button @click="vIf()">动态创建和删除</button>
        <div v-if="isJud" :style="inLineStyleObj">v-if</div>
        <div v-else>1213</div>
        <br>

        <h2>数组遍历</h2>
        <div>in遍历</div>
        <br>
        <div>判断购物车是否有数据</div>
        <div v-if="goods.length">
            <ul v-for="(good,index) in goods" key="good.id">
                <li>{{good}}-索引-{{index}}</li>
            </ul>
        </div>
        <div v-else>购物车空空如也</div>

        <br>
        <div>of遍历</div>
        <div v-if="goods.length">
            <ul v-for="(good,index) of goods">
                <li>{{good}}-索引-{{index}}</li>
            </ul>
        </div>
        <div v-else>购物车空空如也</div>

        <h2>对象遍历</h2>
        <div v-for="(style,key) in inLineStyleObj">
            <ul>
                <li>{{style}}-索引-{{key}}</li>
            </ul>
        </div>

        <div v-for="(style,key) of inLineStyleObj">
            <ul>
                <li>{{style}}-索引-{{key}}</li>
            </ul>
        </div>

        <div>三选一或多选一</div>
        <div v-if="which===1">111</div>
        <div v-else-if="which===2">222</div>
        <div v-else>333</div>
    </div>

    <div>
        {{10 + 20}}
    </div>

<script>
    var myDiv = new Vue({
        el:"#myDiv",
        data:{
            myName:"YYM",
            myHtml:"<a href='https://www.baidu.com'>NUll</a>",
            isShow:true,
            isCreated:true,
            isActive:true,
            inLineStyle:true,
            classObj:{
                a:true,
                b:false
            },
            classArr:['a','c'],
            inLineStyleObj:{
                backgroundColor:'green',
                border:'2px red solid'
            },
            inLineStyleArr:[
                {
                    backgroundColor:'orange',
                    fontSize:'20px'
                }
            ],
            isJud:true,
            buyCar:[],
            goods:['1','2','3'],
            which:3
        },
        methods:{
            handleClick(){
                this.isActive = !this.isActive
            },
            classObjClick(){
                this.classObj.a = !this.classObj.a;
                this.classObj.b = !this.classObj.b
            },
            classArrClick(){
                this.classArr.pop();
            },
            inLineStyleClick(){
                this.inLineStyle = !this.inLineStyle;
            },
            inLineStyleObjClick(){
                this.inLineStyleObj.backgroundColor = 'yellow'
            },
            inLineStyleArrClick(){
                this.inLineStyleArr.backgroundColor = 'blue';
                this.inLineStyleArr.fontWeight = 1000;
                this.inLineStyleArr.push({
                    color:"white",
                    borderRadius:'10px'
                })
            },
            vIf(){
                this.isJud = !this.isJud;
            }
        }
    })
</script>
</body>
</html>

总结

取反：

	this.isJud = !this.isJud;

Vue中dom节点渲染,（新老节点对比用唯一标识ID->key=“good.id”）避免重复渲染，从而实现复用：

	<div v-if="goods.length">
	    <ul v-for="(good,index) in goods" key="good.id">
	    	<li>{{good}}-索引-{{index}}</li>
	    </ul>
	</div>

男孩子小杨

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录