制作一个简易的可点击的类文档_如何建一个可以点击的文档-优快云博客

本文链接：https://blog.youkuaiyun.com/dsc__hhh/article/details/103706692

1.html文档片段

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		.language span {
			line-height: 30px;
			display: inline-block;
			padding: 0 10px;
			border: 1px solid #ccc;
			cursor: pointer;
		}
		.language span.on{
			background: orange;
			color: white;
		}
	</style>

</head>
<body>
	<div id="app">
		<my-input-two :value="language" @change="change"></my-input-two>
	</div>
</body>
</html>

2.js文档片段

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	Vue.component('my-input-two',{
		props:{ //接收父组件传来的数据
			value:{
				type:String,//指定数据类型
				require:true,//是否必填
			}
		},
		data:function(){ //使用工厂函数返回data，实现深拷贝，避免牵一发而动全身
			return {
				list:[
					{id:1,lg:'亚索'},
					{id:2,lg:'盲僧'},
					{id:3,lg:'诺手'},
					{id:4,lg:'瑞文'},
					{id:5,lg:'剑姬'},
				]
			}
		},
		// 实现页面布局
		template:`<div class="language">
			<span 
			v-for="(item) in list" 
			v-text="item.lg"   //通过循坏将数据到html标签上
			@click="change(item.id)"  //点击获取唯一的id
			:class="{'on':item.id == value}"  //点击谁谁就处于高亮状态
			></span>
		</div>`,
		methods:{
			change(id) { //子组件的点击事件获取子组件变化后的值
				this.$emit('change',id)//通过事件通信触发父组件的自定义事件，然后将值传回父组件
			}
		}
	})
	var app = new Vue({
		el:'#app',//挂载的节点
		data:{//储存数据
			language :'1'//将要传到子组件的值（初始值）
		},
		methods:{
			change(id) { //通过自定事件接收子组件传来的值
				this.language = id+"" //将传给子组件的数据重新赋值，这个值就是从子组件传过来的值
			}
		},
	})
</script>