053：vue工具--- 英文字母大小写在线转换

第047个

查看专栏目录: VUE ------ element UI

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

（1）提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等

（2）提供element UI的经典操作：安装，引用，国际化，el-row，el-col，el-button，el-link，el-radio，el-checkbox ，el-input，el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等

应用场景

vue项目中，如何将英文字母大小写在线转换呢，其实很简单，利用toUpperCase() 和toLowerCase()将字符串转换为大写和小写。

示例效果

示例源代码（共173行）

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-12-16
*/

<template>
	<div class="djs-box">
		<div class="topBox">
			<h3>vue示例：英文字母网址大小写在线转换 </h3>
			<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>
		<div class="dajianshi">
             <el-input type="textarea" :rows="10" v-model="textdata" style="font-size: 18px;"></el-input>
		</div>
		<h4>
			<el-button type="success" size="small" @click="convert('xx')">转成小写</el-button>
			<el-button type="primary" size="small"  @click="convert('dx')">转成大写</el-button>
			<el-button type="danger" size="small"  @click="clear()">清除内容</el-button>
		</h4>
	</div>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				textdata:'Dajianshi： OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).',
			}
		},
		mounted() {
    
    
			
		},
		methods: {
    
    
			clear(){
    
    
				this.textdata='';
			},
            convert(x){
    
    
				if(x=='xx'){
    
    
					this.textdata=this.textdata.toLowerCase()
				}
				if(x=='dx'){
    
    
					this.textdata=this.textdata.toUpperCase()
				}
			},
		}

	}
</script>
<style scoped>
	.djs-box {
    
    
		width: 900px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid seagreen;
	}

	.topBox {
    
    
		margin: 0 auto 0px;
		padding: 10px 0 20px;
		background: #666;
		color: #fff;
	}

	.dajianshi{
    
    
		width: 90%;
		height: 300px;		
		margin: 50px auto 0;
	}
</style>