mint-ui —— radio的使用

版权声明:本文为博主原创文章,转载务必注明出处,http://blog.csdn.net/michael_ouyang。 https://blog.csdn.net/michael_ouyang/article/details/76359137


Import

按需引入:

import { Radio } from 'mint-ui';

Vue.component(Radio.name, Radio);

 

全局导入:全局导入后不用再导入

import Mintfrom 'mint-ui'

import 'mint-ui/lib/style.css'

Vue.use(Mint);

 

 

 

API



 

 

 

示例

示例一:

xxx.vue

<template>
  <div id="app">
		<mt-radio
		  title="单项选择"
		  v-model="value"
		  :options="options" @change="check">
		</mt-radio>
		
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
  	return {
  		// 存放所选选项(字符串)
			value: "",
			// radio的选项
			options : [{
		    label: '选项A',
		    value: 'A'
			},
			{
		    label: '选项B',
		    value: 'B'
			},
			{
		    label: '选项C',
		    value: 'C'
			},
			{
		    label: '选项D',
		    value: 'D'
			}]
  	}
  },
  mounted:function(){
  	
  },
  methods:{
		check: function(){
			console.log(this.value)
		}
  }
}
</script>

<style>
	
</style>

 

show

 

选择某一项

 

输出B字符串

 




demo链接:http://download.csdn.net/detail/michael_ouyang/9915056

使用前输入命令:

npm install

npm run dev



展开阅读全文

没有更多推荐了,返回首页