vue2.0中针对字符串类型数据转换并输出方法，输入框宽度根据文字输入个数动态增加方法。

最近做的项目有一个考试作答功能，其中除过单选，多选，判断，简答，还有填空题。其他题操作都很简单，但是填空题就稍微麻烦一点，需要做处理。

一.数据结构及最终显示效果：

二.HTML代码（重点）：

							
	
{{index + 1}}. {{vo.type == 1 ? '【单选题】' : vo.type == 2 ? '【多选题】' : vo.type == 3 ? '【判断题】' : vo.type== 4 ? '【填空题】' : vo.type== 5 ? '【简答题】' : ''}} 
{{vo.title}}（{{vo.score}}分）

	

		

	
	

							
	
	

		

			
			
				
					
					
				
			
			{{subVo.optionOrder}}. {{subVo.title}}
		
		
	
	

三.JS部分主要处理根据拿到的数据转换成想要的展示方式并显示出来，另外填空题输入的输入框根据输入字的多少长度动态增加：

export default {
        data() {
            return {               
					                                        
                
            }
        },
        mounted: function () {
            //propertychange监听input里面的字符变化,属性改变事件,根据输入字符长度改变输入框宽度  
			setTimeout(function() {
			    //PC端
				$('.emptyOut').bind('input propertychange', function() {
					var $this = $(this);
					var text_length = $this.val().length; //获取当前文本框的长度  
					//该24是改变前的宽度除以当前字符串的长度,算出每个字符的长度  
					var currentWidth = parseInt(text_length)*24;
					if(currentWidth <= 52) {
						$this.css("width", "70px");
					} else if(52 < currentWidth && currentWidth < 480) { //490								
						$this.css("width", currentWidth + "px");
					} else {
						$this.css("width", 480 + "px");

					}

				});
				//移动端
				$('.emptyOut').bind('input propertychange', function() {
					var $this = $(this);
					var text_length = $this.val().length; //获取当前文本框的长度  
					var currentWidth = parseInt(text_length) * 32; //该32是改变前的宽度除以当前字符串的长度,算出每个字符的长度  
					if(currentWidth <= 144) {
						$this.css("width", "0.70rem");
					} else if(144 < currentWidth && currentWidth < 480) { //490
						var w = (currentWidth / 2) / 100;
						$this.css("width", w + "rem");
					} else {
						var w = (480 / 2) / 100;
						$this.css("width", w + "rem");

					}

				});
			}, 1000)
			
        },
        methods: {
           emptyOut: function(value) { //填空题过滤处理函数(也可以写在filter里面，写filter中在移动端有问题)
		         //移除双[[]]括号	
				//var reg = new RegExp(/\[\[.*?\]\]/g,'g')
				//ES5写法（针对安卓手机）
				var reg = /\[\[.*?\]\]/g				
				return value.replace(reg, '');
				
			},		
           
    
        },
    }

四.title字符串类型的数据经过emptyOut转换后显示的代码：

11诗词补充:空山新雨后,明月松间照,竹喧归浣女,

五.填空题输入根据输入字数长度，输入框相应增加效果：