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

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

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

二.HTML代码（重点<i v-html="emptyOut(vo.title)" class="i_title"></i>）：

<div class="answer-content-body" v-for="(vo,index) in data.showQuestionInfo" :key="index" :id="vo.id">							
	<p class="answer-title">{{index + 1}}. {{vo.type == 1 ? '【单选题】' : vo.type == 2 ? '【多选题】' : vo.type == 3 ? '【判断题】' : vo.type== 4 ? '【填空题】' : vo.type== 5 ? '【简答题】' : ''}} <i v-if="vo.type==4" class="i_title"><form @change="emptyOutBlur($event,vo.id,index)"  οnsubmit="return false;" action="###"><i v-html="emptyOut(vo.title)" class="i_title"></i></form></i><i v-else class="i_title">{{vo.title}}</i><span>（{{vo.score}}分）</span></p>
	<ol class="img-ol" v-if="vo.titleImageList!=null">
		<li v-for="item in vo.titleImageList"><img :src="item" @click="bigImgShow(item)"/></li>
	</ol>
	<div class="short-answer-box" v-if="vo.type==5">
		<textarea   ref="textareaVal" :cn="index" @blur="shortAnswerBlur(vo.id,index)" placeholder="请输入作答内容不大于500字"  maxlength="500"></textarea>					
	</div>
	<ul class="member-question-choice" v-if="vo.type!=4 && vo.type!=5">
		<li v-for="(subVo,subIndex) in vo.answer">
			<el-checkbox v-if="vo.type == 2" @change="saveQuestion($event,vo.id,vo.type,subVo,vo,index)"  v-model="subVo.status"></el-checkbox>
			<label class="el-radio" v-else>
				<span class="el-radio__input">
					<span class="el-radio__inner"></span>
					<input type="radio" class="el-radio__original" @change="saveQuestion($event,vo.id,vo.type,subVo,vo,index)" :name="subVo.questionId" :value="subVo.id"/>
				</span>
			</label>
			<span :class="{choices:subVo.status==true || subVo.status=='true'}">{{subVo.optionOrder}}. {{subVo.title}}</span>
		</li>
		
	</ul>
	
</div>

三.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, '<input class="emptyOut" type="text" />');
				
			},		
           
    
        },
    }

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

<i class="i_title">11诗词补充:空山新雨后<input class="emptyOut" type="text" style="width: 120px;">,明月松间照<input class="emptyOut" type="text">,竹喧归浣女<input class="emptyOut" type="text">,</i>

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