vue 中的select 本地图片引入需要注意的点

select 初始化需要注意 v-model 绑定赋值的和<option> :value 绑定的属性相同

<select ref="type" v-model="selectedvalue" >
    <option v-for="(item,index) in list " :value="item.value">{{item.text}}</option>
</select>

<script>
var vm = new Vue({
    el: '#app',
    data: {
    list: [
        { value: 0, text: "水果", selected: true },
        { value: 1, text: "香蕉", selecttd: false },
        { value: 2, text: "栗子", selected: false },
        { value: 3, text: "苹果", selected: false },
    ],
    selectedvalue:'' //默认显示的文本
},
created(){
    this.selectedvalue=this.list[0].value //默认显示的文本 不然会是空白的
},
})
</script>

vue 获取select 选中的值

//给select绑定一个val  ，这个val  要在data中声明一下 
 <select ref="type" v-model="val" >
        <option value="" >请选择您要查找的类别</option>
        <option v-for="item in  list " :value="item.value">
          {{item.text}}                     
        </option>
 </select>

//然后在vue中javascript中写watch 监听事件  这里的val是list的下标
 var vm = new Vue({
        data:{
                val:''，
                list:[
                    {value: 0,text:"相机"},
                    {value: 1,text:"香蕉"},
                    {value: 2,text:"水果"},
                    {value: 3,text:"芒果"},
                ],
            }
      watch:{
                    val(val,oldval){
                        console.log(this.list[val].text); //这个值就是我select选中的文本
                    }
                 }
    }）

vue中引入本地的图片不能直接写图片的路径需要require 引入

3.jpg

如果你有一个单独的json文件，里面有图片路径，这时候需要你将要引入的图片放在static中，因为只有static中的静态文件可以被外部访问，这时候图片路径的相对位置是要引入图片的组件地址为准