vue中动态select的使用方法示例
本文实例讲述了vue中动态select的使用方法。分享给大家供大家参考，具体如下：
html代码如下:
通过v-model可以获取到选中的值，如果没值就默认第一个;如果有值就显示有值的那个内容
<template>
<div class="violationsList">
<div class="type-select">
<select name="selected" id="" v-model="selected" @change="getTypeSelected">
<option :value="types.id" v-for="types in typeList" >{{types.name}}</option>
</select>
</div>
</div>
</template>
js中写如:
<script>
export default {
data(){
return{
typeList:[
{id:1,name:'违规类型'},
{id:2,name:'无人值守'},
{id:3,name:'蒙头睡觉'},
],
selected:''
}
},
created(){
//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
this.selected = this.typeList[0].id;
},
methods:{
getTypeSelected(){
//获取选中的违规类型
console.log(this.selected)
}
}
}
</script>
希望本文所述对大家vue.js程序设计有所帮助。
-
本文向大家介绍在vue中使用setInterval的方法示例，包括了在vue中使用setInterval的方法示例的使用技巧和注意事项，需要的朋友参考一下 昨天在用vue开发项目的时候遇到一个坑，在群友的探讨中，成功的解决了这一问题。 具体情形如下：使用vue开发，在页面中有一个人数统计组件，人数统计是要动态变化数据的，由于目前没有真实数据，那么我想的是用随机数和setInterval来改变dat
-
本文向大家介绍clipboard在vue中的使用的方法示例，包括了clipboard在vue中的使用的方法示例的使用技巧和注意事项，需要的朋友参考一下 简介 页面中用 clipboard 可以进行复制粘贴，clipboard能将内容直接写入剪切板 安装 使用方法一 使用方法二 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍vue中jsonp插件的使用方法示例，包括了vue中jsonp插件的使用方法示例的使用技巧和注意事项，需要的朋友参考一下 通过jsonp简单获取接口数据，对了，注意下jsonp方法会自动添加callback 总结 到此这篇关于vue中jsonp插件的使用的文章就介绍到这了,更多相关vue中jsonp插件使用内容请搜索呐喊教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持呐喊教
-
本文向大家介绍vue 动态组件用法示例小结，包括了vue 动态组件用法示例小结的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue 动态组件用法。分享给大家供大家参考，具体如下： 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。
-
本文向大家介绍Java JDK 动态代理的使用方法示例，包括了Java JDK 动态代理的使用方法示例的使用技巧和注意事项，需要的朋友参考一下 本文主要和大家分享介绍了关于Java JDK 动态代理使用的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 前言 代理是一种常用的设计模式，其目的就是为其他对象提供一个代理以控制对某个对象的访问。代理类负责为委托类预处理消息，过滤消息并转发消
-
本文向大家介绍Vue动态获取width的方法，包括了Vue动态获取width的方法的使用技巧和注意事项，需要的朋友参考一下 vue里想用Bootstrap的进度条， 主要是把style="width: 20%;"变成动态获取的。 这样写就好了。 也可是这样： 用vue 获取动态元素的宽度。首页，要放在this.$nextTick里面，其实要使用$el挂载此元素，下面贴代码吧： 先定义一个ref=c