动态给img的src属性赋值&Vue中通过document的getElementById()获取为空&Vue输入框中使用v-model导致number类型值自动转换成string

一.vue中img的src动态赋值（本地图片的路径）

问题&原因
1.问题：img的src属性直接绑定url变量，然而图片加载失败

<img :src=" '../../assets/images/'+item.url+'.jpg' " alt="picture"/>

2.原因：
在webpack中会将图片图片来当做模块来用
url-loader将直接将:src=" ‘…/…/assets/images/’+item.url+‘.jpg’ "解析成字符串，因为是动态加载的，所有无法解析图片地址
然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为/static/img/[filename].png，完整地址为localhost:8080/static/img/[filename].png】
解决办法
1.将文件放在statics目录下（与src同级）
图片一类的静态文件，应该放在这个static文件夹下
这个文件夹下的文件（夹）会按照原本的结构放在网站根目录下
这时我们再去使用/static绝对路径，就可以访问这些静态文件了
注意：这样的话必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]
但是，放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。
为了兼顾可以把图片资源优化，所以还是不适合把图片资源放到static。
2.require方法
如果不想更改路径，可以用require将图片作为模块加载进去
用了require，就是将图片当成模块先引进来，再绑定。

<img :src="require('../../assets/images/classic.jpg')" alt="picture">

当需要实现动态加载图片的时候就需要传一个变量给require，但是require中不能直接赋值一个变量，可以用以下方法

二.Vue中通过document的getElementById()方法返回元素对象时，有时候遇到为null值
1、问题现象
　　在Vue中通过document的getElementById()方法返回元素对象时，有时候遇到为null值。

2、问题分析
　　在代码中确实为目的元素指定了ID，那为何还会出现对象为null的现象呢？首先，对该ID元素的属性、样式进行分析，它是通过v-if指令来控制是否显示的，它是动态加载元素组件的，也就是说当v-if指令为false时，该ID元素是不会出现在Element树中，此时调用getElementById()方法来获取该ID元素，那么得到的值肯定会为null值；只有当v-if指令为true时才会动态异步加载该元素，如果还没有等到该元素加载完成，就立即调用getElementById()方法来获取该元素的话，那么得到的值也会为null值，只有当该元素完全加载后，再调用getElementById()方法，就不会得到null值了。

3、问题处理
　　要是在现实中的确需要用到这样的一个场景，当某个元素立即显示，同时通过ID来获取该元素时，那么此时就不能使用v-if指令了，我们可以使用v-show指令。也就是说，在代码中用v-show指令替换掉v-if指令，就不会出现getElementById()方法返回null值的问题了。其实，v-show指令是一种懒加载的处理机制。

三.Vue.JS项目输入框中使用v-model导致number类型值自动转换成string问题的解决方案
问题：Vue.JS项目中v-model导致输入框中number类型值自动转换成string问题的解决方案。
解决方案：1.用el-input v-model.number就能解决
2.写一些事件进行格式转换，具体方法不写了