js，html，vue常用问题

1. 强转JS变量为数字类型

在js里 当数据库拉出下拉框数值为0时，放到前台select里会被认为是空，从而不显示option=0的那一项，需要Number强转为数字。

test = Number(test);   

2. 获取js对象数据类型

alert(typeof test)   // 用于打印js数据的类型

3. 让前台控件不可编辑readonly/disabled

相同点:如果设为true。则form属性不能被编辑、文本框不能输入文字。
不同点: 1、样式不同。 readonly只是使文本框不能输入，外观没有变化。 disabled会使文本框变灰。
2、有效范围不同。readonly只针对input和textarea之类可以输入文本有效，disabled对所有的表单元素都有效。
3.能否获取鼠标焦点。readonly可以聚焦，disabled不能
4.是否回传数据。readonly会将值传递出去，及通过request.getParameter（‘name’）可以获取文本框的值。disabled不会

<input type="text" id="test" />
var test=‘hello world’
$("#test").val(test);
$("#test").attr("readonly",true);     //js中为前台赋值，并设置只读
$("#test").attr("disabled",true);

4.搜索框即时搜索问题

vue中v-on:input可以监控组件，只要内容发生变化，就会触发

<input v-on:input="search()"  type="text"  id="test" name="test"  /> 

5.隐藏前台控件

style="display:none"可以隐藏控件，不占用页面位置，但功能正常运行

 <button type="button" id="add" style="display:none">新增</button>


 $("#add").attr("style","display:none;");

6. select框多选

multiple支持select框多选，获取数据时，是一个object对象，引入select2模块

  <script th:src="@{/xxx/js/select2/select2.js}" type="text/javascript"></script>

6.1 新增时，从数据库获取 bookList，并展示

   <select id="test" name="bookid"   multiple="multiple" >
		<option :value="0">请选择书籍</option>
		<option v-for="book in bookList" :value="book.bookname">
		{{book.bookname}			
		</option>
    </select>  

6.2编辑时，从数据库数据获取bookList，调整格式，并给前台赋值

方式1：

	var tmplist = [];
	$.each(this.bookList, (index, item)=>{
							tmplist.push(item.bookname);
						});
   $("#test").val(tmplist).select2();

方式2

	var bookList = ['bookname1','bookname2']
	$("#test").val(bookList).select2();

7. vue中 ，select多选框被选中某一个时，触发某种操作

通过watch监测vue变量，一旦发生变化，就会触发

var testVm = new Vue({
			el: "#test-edit",  
			data(){
				return {
					allgroupchange:"false",
					...
				  };
		       	},
		   methods: {
		    },    	
		   mounted(){
			},

		  watch:{
				allbookchange(newVal, oldVal) {
					if(newVal){
						this.allgroupchange = false;
						...想做操作的代码块
						 
					}
				},
			},
	});

设置触发函数

$("#test").on("change", function(){
			    valueObj = $("#test").val()
				for(value in valueObj){
						if(valueObj[value] == "0"){
							me.allbookchange = "true";
						}
				}
		});

8. Textarea输入内容后台存储换行问题，前台展示换行问题，及内容过长截取问题

8.1 首先在前台调整，在加载页面时，设置输入触发函数，这样用户可以通过敲击回车换行

<textarea id="test"  name="test"  rows="5"></textarea>

$(document).ready(function(){				

			//处理backgroud的enter键 start
			$("#test").on("keydown", function(event){		
				if (event.keyCode == 13){					
					$("#test").append("\r\n");
					event.stopPropagation();
					//event.preventdefault();
				}
			});
			//处理backgroud的enter键 end
			
		}); 

8.2 提交时，正常获取前台页面填写内容，写入数据库的已经包含换行符

  $("#test").val().trim()

8.3 编辑时，正常从数据库获取并赋值

var test = ‘sss’
 $("#test").val(test);

8.4 前台展示，内容过长可截取，substr截取字符串，replace解决前台展示换行问题

 {
                            	 
                      "data": "test",
       			  "render": function(data, type, row, meta) {
            					//判断值的长度是否超过30，如果是则截取
               				if (data.length > 30) {
                   			//return '<span>' + data.substr(0, 30) + '...</span>';
                   			data =  data.substr(0, 30)+'...'
               			return '<p>' + data.replace(/</g,"&lt;") + 	'</p>'
               			} else {
                    			//return '<span>' + data + '</span>';
                    	 return '<p>' + data.replace(/</g,"&lt;") + '</p>'
               				}

      				 	},
                       "sWidth": "440px"
                             
   },