故如虹,知恩;故如月,知明
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

Vue.js if用法

4479人阅读 2019/5/15 20:49 总访问:3842736 评论:2 收藏:0 手机
分类: Js相关


vue.js if可以做一些判断


例如我们要把下面这个输出

   var vm = new Vue({
        el: "#content",
        data: {
            titles: ["小明", "<span>哈哈<span>", "小白", "<span>洗洗<span>"]
        }
    });

直接输出的话,标签也会被当做字符串输出

<div id="content">
    <div v-for="item in titles">
        <span>{{item}}</span>
    </div>
</div>

            


我们判断一下如果含有span标签,我们就把他当做html来输出

<div id="content">
    <div v-for="item in titles">
        <span v-if="item.indexOf('<span>') !== -1" v-html="item">{{item}}</span>
        <span v-else>{{item}}</span>
    </div>
</div>

哈哈,显示效果如下(tip:有可能多个tiem之间显示有空格了调整下html结构就好了):

           

陈独秀都没有你秀      



欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价