Vue：指令

最新推荐文章于 2024-09-08 23:07:57 发布

原创最新推荐文章于 2024-09-08 23:07:57 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

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

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>