vue移动端项目vant组件库之tag详解

 更新时间:2022年04月26日 09:59:51   作者:笑望灬星辰  
这篇文章主要介绍了vue移动端项目vant组件库之tag详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vant组件库之tag

直接上代码

<template>
  <div class="pd50">
    <!-- Tag标签的属性与Button按钮的大体相同 -->
    <!-- 基础用法 
        其他第三方ui库的颜色可能不一致
    -->
    <h2>基础用法</h2>
    <van-tag type="primary">标签</van-tag>
    <van-tag type="success">标签</van-tag>
    <van-tag type="danger">标签</van-tag>
    <van-tag type="warning">标签</van-tag>
    <!-- 空心样式 
        多数第三方都是采用 plain 作为空心样式
    -->
    <h2>空心样式</h2>
    <van-tag plain type="primary">标签</van-tag>
    <h2>圆角</h2>
    <van-tag round type="primary">标签</van-tag>
    <h2>标记样式 半圆角</h2>
    <van-tag mark type="primary">标签</van-tag>
    <h2>可关闭标签</h2>
    <!-- 需要自己写逻辑控制关闭 -->
    <van-tag v-if="show" closeable type="primary" @close="close">
      标签
    </van-tag>
    <h2>大小</h2>
    <van-tag type="primary">标签</van-tag>
    <van-tag type="primary" size="medium">标签</van-tag>
    <van-tag type="primary" size="large">标签</van-tag>
    <h2>自定义颜色</h2>
    <!-- 
        color 背景颜色
        text-color 文本颜色
     -->
    <van-tag color="#7232dd">标签</van-tag>
    <van-tag color="#ffe1e1" text-color="#e44e44">标签</van-tag>
    <van-tag color="#7232dd" plain>标签</van-tag>
    <h2>渐变色没有起作用,后续博文处理该问题</h2>
    <van-tag color="linear-gradient(to right, #ff6034, #ee0a24)">我是渐变tag</van-tag>
    <!--  -->
    <h2>其他</h2>
    <div>内容是个默认插槽, 也就是说可以进行一些额外的布局</div>
    <van-tag type="success" plain><span style="color:#347ad0">我可以</span></van-tag>
    <van-tag type="success" plain>
        <img src="@/assets/1.jpg" alt="">
    </van-tag>
  </div>
</template>
<script>
import { Tag } from "vant";
export default {
  components: {
    vanTag: Tag,
  },
  data() {
    return {
      show: true,
    };
  },
  methods: {
    close() {
      this.show = false;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

效果

tag标签选中(类型选择,分类选择)

使用三元表达式为类选择器给值。当变量active被点击赋值时则,引用active样式。无点击使用Classification样式。

往往就是简单的操作,就把自己玩懵逼了!写半天报找不到Classification,还在想诶?Classification不是变量啊。一脸懵逼。最后发现'active':'Classification'。没加''。(日常自己坑自己)

效果图:

<div v-for="(item,index) in data">
	<span :class="active==item.type?'active':'Classification'" @click="oncheck(item.type)">        
         {{item.type}}</span>
</div>

js:

data() {
	return {
		data: [{
			    type: '66P'
			}, {
			    type: '760P'
			}, {
			    type: '(含16G系统优盘)660P'
			}, {
			    type: '(含16G系统优化盘)760P'
			}],
			active:''
			}
},
 
methods: {
    oncheck(name){
		 console.log(name)
		 this.active=name
	}
}

css:

.active{
		float: left;
		margin-left: 10px;
		padding: 10px;
		background: #efc531;
		margin-bottom: 10px;
		border-radius: 4px;
		font-size: 14px;
	}
.Classification {
		float: left;
		margin-left: 10px;
		padding: 10px;
		background: #f7f7f7;
		margin-bottom: 10px;
		border-radius: 4px;
		font-size: 14px;
	}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue使用混入定义全局变量、函数、筛选器的实例代码

    vue使用混入定义全局变量、函数、筛选器的实例代码

    本文主要是给大家分享利用混入mixins来实现全局变量和函数。这种方法优点是ide会有方法、变量、筛选器提示。对vue中 利用混入定义全局变量、函数、筛选器的相关知识感兴趣的朋友,跟随小编一起看看吧
    2019-07-07
  • vue如何实现动态加载脚本

    vue如何实现动态加载脚本

    这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • vue-router vuex-oidc动态路由实例及功能详解

    vue-router vuex-oidc动态路由实例及功能详解

    这篇文章主要为大家介绍了vue-router vuex-oidc动态路由实例及功能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

    Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

    这篇文章主要介绍了Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners),需要的朋友可以参考下
    2018-05-05
  • vue3.0中使用element的完整步骤

    vue3.0中使用element的完整步骤

    这篇文章主要给大家介绍了关于vue3.0中使用element的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue-cli构建vue项目的步骤详解

    vue-cli构建vue项目的步骤详解

    这篇文章主要介绍了vue-cli构建vue项目的步骤详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue3在css中使用js变量及其原理解读

    Vue3在css中使用js变量及其原理解读

    这篇文章主要介绍了Vue3在css中使用js变量及其原理解读,结合实例代码介绍了vue3中css使用script中定义的变量的方法,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue中使用loadsh的debounce防抖函数问题

    vue中使用loadsh的debounce防抖函数问题

    这篇文章主要介绍了vue中使用loadsh的debounce防抖函数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue列表数据发生变化指令没有更新问题及解决方法

    vue列表数据发生变化指令没有更新问题及解决方法

    这篇文章主要介绍了vue中使用指令,列表数据发生变化指令没有更新问题,本文给出了解决办法,需要的朋友可以参考下
    2020-01-01
  • Vue分页组件的封装方法

    Vue分页组件的封装方法

    这篇文章主要为大家详细介绍了Vue分页组件的封装方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论