vue初探2

2021-08-02 21:35:11 阅读：160 来源： 互联网

标签：function vue text pic isAllSelects 初探 selects SELECT

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app">
			<button type="checkbox" @click="toggle()" >{{this.isAllSelects_text}}</button>

			<div v-for="item in alls">
				<input type="checkbox" :value="item" v-model="selects" />{{item}}<br>
			</div>
			<p> {{this.getSelects}} </p>
		</div>
	</body>
	<script type="application/javascript">
		let app = new Vue({
			el: "#app",
			data: {
				alls: ["banana", "orange", "watermelon", "pear", "apple"].sort(),
				selects: [],
				isAllSelects: false,
				isAllSelects_text: "SELECT ALL",
			},
			methods: {
				toggle: function() {
					this.isAllSelects = !this.isAllSelects;
					this.selects = (this.isAllSelects == true ? this.alls : []);
					this.isAllSelects_text = (this.isAllSelects == true ? "NO SELECT" : "SELECT ALL");
				},
			},
			computed: {
				getSelects: function() {
					return this.selects.sort();
				}
			}

		});
	</script>
</html>

pic-1
在这里插入图片描述

pic-2
在这里插入图片描述

pic-3
在这里插入图片描述

标签：function,vue,text,pic,isAllSelects,初探,selects,SELECT
来源： https://blog.csdn.net/xiaoweitianshi001/article/details/119334064

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue初探2