Vue学习笔记（一）

最新推荐文章于 2024-09-09 21:20:26 发布

不学医的医学生

最新推荐文章于 2024-09-09 21:20:26 发布

阅读量132

点赞数

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/qq_42178626/article/details/114902449

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue学习笔记（一）

笔记只针对学习中遇到的模糊的点，如果不对的地方，请各位大神批评指正。

详细学习请关注Vue.js官网：https://cn.vuejs.org/v2/guide/

v-html的使用

用法

在标签上使用v-html属性。

功能

把文本中有关html的语言进行编译。

实例

<div id='app'>
<div v-html="htmlContext"></div>
</div>


<script>
		var vm=new Vue({
			el:'#app',
			data:{
				htmlContext:'<span>这是HTML页面</span>',
			}
		})
</script>

v-if与v-else

要点

v-if和v-else一起在模板中使用时，对于重复的元素（如input），则不会重新加载

实例

		<div id='app'>
			<input v-model="type" />
			<template v-if="type=='username'">
				<label>Username</label>
				<input placeholder="Enter your username">
			</template>
			<template v-else>
				<label>e-mail</label>
				<input placeholder="Enter your e-mail">
			</template>
		</div>

	<script>
		var app=new Vue({
			el:'#app',
			data:{
				type:'username'	
			}
		})
	</script>

效果

此时：改变type的值，input输出框的值不会发生变化（input没有重新加载）

如果想重新加载input 可以在标签后面加上不同的key

			<input v-model="type" />
			<template v-if="type=='username'">
				<label>Username</label>
				<input placeholder="Enter your username" key='1'>
			</template>
			<template v-else>
				<label>e-mail</label>
				<input placeholder="Enter your e-mail" key='2'>
			</template>

避免v-for和v-if一起使用

原因

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级（Vue.js官方API）

如果你有‘强迫症’

如果你在项目中必须必的要这么做，可以使用computer，先对循环的对象进行筛选

		<div id='app'>
			<li v-for="item in listCopy">
				{{item}}
			</li>
		</div>

	<script>
		var app=new Vue({
			el:'#app',
			data:{
				list:[1,1,3]
			},
			computed:{
				listCopy(){
					return this.list.filter((item)=>{
						return item!=3
					})
				}
			}
		})
	</script>

此时，就不会加载 '3'

关于v-model的使用

1、单选框

如果v-model绑定在单选框上且绑定的值为布尔类型，当被选中时返回的是true

<input type="checkbox" id="jack" value="Jack" v-model="checked">

2、复选框

如果v-model绑定在复选框上且绑定的值为数组类型，则选中后，数组中被选中的value值

			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>

3、下拉列表

如果v-model绑定在下拉列表上，当下拉列表某一个被选中时，v-model返回的是被选中<option>的value

<!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'>
			  <select v-model="selected">
			    <option disabled value="">请选择</option>
			    <option v-for="item in list" :value="item">
					{{item.text}}
				</option>
			  </select>
			  <span>Selected: {{ selected }}</span>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				list:[{
					text:'二折',
					count:0.2
				},{
					text:'九折',
					count:0.9
				},{
					text:'八折',
					count:0.8
				}],
				selected:{},
				res:0.0
			},
			
		})
	</script>
</html>