Vue2常用指令

最新推荐文章于 2025-05-07 13:27:54 发布

揭开画皮

最新推荐文章于 2025-05-07 13:27:54 发布

阅读量125

点赞数 3

文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_75166176/article/details/143438614

版权

<!DOCTYPE html>
<html>
 
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		div {
			width: 100px;
			height: 100px;
			border: 1px solid;
			text-align: center;
		}
 
		img {
			width: 200px;
		}
	</style>
</head>
 
<body>
	<div id="app">
		<!-- v-html -->
		<div v-html="vhtml"></div>
 
		<!-- v-show  如果属性值为false，只会隐藏显示-->
		<div v-show="vShowAndvIf" class="box">v-show盒子</div>
 
		<!-- v-if   如果属性值为false，会直接删除dom元素-->
		<div v-if="vShowAndvIf" class="box">v-if盒子</div>
 
		<!-- v-if ；v-else-if ；v-else 为属性值做判断，只显示条件成立的，其余的dom元素删除 -->
		<p v-if="vIfElseIf >=90">A</p>
		<p v-else-if="vIfElseIf >=80">B</p>
		<p v-else-if="vIfElseIf >=60">C</p>
		<p v-else>D</p>
 
		<!-- v-on 添加事件 -->
		<button @click="fnSub">-</button>
		<span>{{ vOn }}</span>
		<button v-on:click="fnAdd(5)">+</button>
 
		<!-- v-bind 绑定资源 -->
		<img v-bind:src="vBind" alt="">
 
		<!-- v-for 循环获取，自动增加dom元素 -->
		<ul>
			<!-- item 表示每一项 ，index表示下标 key给元素添加唯一标识-->
			<li v-for="(item,index) in list" :key="item.id">{{item.name+item.id}}</li>
		</ul>

		<!-- v-model 双向绑定 ，修改和获取输入框中的数据-->
		账户:<input type="text" v-model="vModelUserName">
		密码:<input type="password" v-model="vModelUserPwd">
		<button v-on:click="login">登录</button>
		<button @click="reset">重置</button>

	</div>
 
	<!-- 引包 -->
    <script src="../指令/vue.js"></script>

 
	<script>
		//引包后，创建实例
		const app = new Vue({
			// el是元素选择器
			el: '#app',
			// data是提供数据的对象
			data: {
 
				//vue中使用插值表达式v-html="属性名"
				vhtml: `<span>消息</span>`,
 
				//控制v-show和v-if属性
				vShowAndvIf: false,
 
				//给予一个值让v-if做判断
				vIfElseIf: 89,
 
				//v-on 添加一个初始值，加加减减操作
				vOn: 100,
 
				//v-bind 添加一条图片链接
				vBind: 'https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg',
 
				//v-for 渲染数据到网页
				list: [{id:1,name:'苹果'},{id:2,name:'橘子'},{id:3,name:'火龙果'} ],

				//v-model 双向绑定
				vModelUserName:'',
				vModelUserPwd:''
			},
			// methods对象负责实现各种对元素操作的功能
			methods: {
				//无参
				fnSub() {
					console.log('你执行了减法操作')
					// 使用app.属性名或 this.属性名都可以
					app.vOn--;
				},
				//有参
				fnAdd(count) {
					console.log('你执行了加法操作' + `加${count}个`)
					this.vOn += count
				},
				//v-model 双向绑定
				login(){
					console.log(this.vModelUserName,this.vModelUserPwd)
				},
				reset(){
					this.vModelUserName = ''
					this.vModelUserPwd = ''
				}

			}
		})
	</script>
</body>
 
</html>