Vue:指令

本文深入解析Vue.js中关键指令的使用方法,包括v-bind用于动态绑定属性,v-if/v-else/v-else-if用于条件渲染,v-for实现列表渲染,v-on处理事件监听,v-model实现双向数据绑定,以及v-text/v-html的展示方式。通过具体示例,帮助读者理解并掌握这些指令的实际应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

v-bind示例
<div id="app-2">
		<span v-bind:title="message">
				鼠标悬停几秒钟查看此处动态绑定的提示信息!
		</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
			var app2 = new Vue({
				el: '#app-2',
				data: {
					message: '页面加载于 ' + new Date().toLocaleString()
				}
			})
</script>
v-if示例
<div id="app-3">
			<p v-if="seen">现在你看到我了</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
			var app3 = new Vue({
				el: '#app-3',
				data: {
					seen: false
				}
			})
</script>
v-else示例
<div id="app-3">
			<p v-if="seen">This is if</p>
			<p v-else>This is else</p>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app3 = new Vue({
				el: '#app-3',
				data: {
					seen: false
				}
			})
		</script>
v-else-if示例
<div id="app-3">
			<p v-if="seen==='a'">This is if</p>
			<p v-else-if="seen==='b'">This is else-if</p>
			<p v-else>This is else</p>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app3 = new Vue({
				el: '#app-3',
				data: {
					seen: "a"
				}
			})
		</script>
v-for示例
<div id="app-4">
			<ol>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ol>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app4 = new Vue({
				el: '#app-4',
				data: {
					todos: [{
							text: '学习 JavaScript'
						},
						{
							text: '学习 Vue'
						},
						{
							text: '整个牛项目'
						}
					]
				}
			})
		</script>

在这里,也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法

v-on(事件监听)示例
	<div id="app-5">
			<p>{{ message }}</p>
			<button v-on:click="reverseMessage">逆转消息</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app5 = new Vue({
				el: '#app-5',
				data: {
					message: 'Hello Vue.js!'
				},
				methods: {
					reverseMessage: function() {
						this.message = this.message.split('').reverse().join('')
					}
				}
			})
		</script>
v-model(双向绑定)示例
<div id="app-6">
			<p>{{ message }}</p>
			<input v-model="message">
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app6 = new Vue({
				el: '#app-6',
				data: {
					message: 'Hello Vue!'
				}
			})
		</script>

v-text/v-html使用示例
<div id="app">
			<p>{{message}}</p>
			<p v-text="message"></p>
			<p v-html="message"></p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: '<h1>Hello Vue!</h1>'
				}
			})
		</script>
v-cloak使用
  • 当不加v-cloak时候示例如下:
	<div id="app">{{msg}}</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			alert("没有加v-cloak")
			var app = new Vue({
				el: '#app',
				data: {
					msg: "Hello"
				}
			})
		</script>

出现结果如下在这里插入图片描述
这种结果肯定是不可以的,所以就有了v-cloak
示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>{{msg}}</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			alert("加了v-cloak")
			var app = new Vue({
				el: '#app',
				data: {
					msg: "Hello"
				}
			})
		</script>
	</body>
</html>

结果如下
在这里插入图片描述
这种结果才是正确的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值