Vue最全指令大集合————VUE

最新推荐文章于 2024-06-11 01:14:10 发布

⎛⎝陈嗯嗯⎠⎞

最新推荐文章于 2024-06-11 01:14:10 发布

阅读量1.8k

点赞数 2

分类专栏： vuejs 前端文章标签： Vue 前端 api

本文链接：https://blog.csdn.net/weixin_41018304/article/details/99098150

版权

前端同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

vuejs

9 篇文章 0 订阅

订阅专栏

Vue指令大集合（无slot）

包含内容：

v-cloak
v-html
v-text
v-bind
v-show
v-model
v-for
v-if v-else-if v-else
v-pre

代码如下：（可以自己复制去看一下）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Vue指令大集合（无 slot）</title>
	</head>
	<style>
		[v-cloak]{
			display: none;
		}
		.css{
			color: red;
		}
	</style>
	<body>
		<div id="domo" v-cloak>
			<p style="color: red;">v-html 标签有效</p>
			<p v-html="name"></p>
			<p style="color: red;">v-text 标签无效</p>
			<p v-text="name"></p>
			<hr />
			<p style="color: red;">style</p>
			<p :style="objCss">使用style从数据拿视图，v-bind====:</p>
			<p style="color: red;">v-bind可以简写成： ,动态地绑定一个或多个特性，或一个组件 prop 到表达式。</p>
			<img v-bind:src='src'>v-bind可以省</img>
			<p :style="{
				color: 'yellow',
				fontSize: '11px'
			}">自己改,数据</p>
			<p :class="{
				'css':!bool
			}">我不是红色的</p>
			<hr />
			<p style="color: red">v-show</p>
			<p v-show="bool">v-show可以控制出现或者隐藏</p>
			<button @click='showClick'>v-on:click====@click点击，隐藏</button>
			<hr />
			<p style="color: red">v-model 双向绑定！</p>
			<input v-model="name"></input>
			<hr />
			<p style="color: red">v-for</p>
			<ul>
				<li v-for="a in arr" v-html="'姓名：'+a.name+'；年龄:'+a.age"></li>
			</ul>
			<p v-for="a in arr" v-html="'姓名：'+a.name+'；年龄:'+a.age"></p>
			<table v-for="a in arr">
				<tr><td>{{a.name}}</td><td>{{a.age}}</td><td><img v-for="i in a.imgs" :src="i" /></td></tr>
			</table>
			<hr />
			<p style="color: red">v-if</p>
			<p v-if="type==='A'" v-text="name1"></p>
			<div v-else-if="type==='B'" v-text="name2"></div>
			<div v-else-if="type==='C'" v-text="name3"></div>
			<div v-else="type==='D'" v-text="name4"></div>
			<hr />
			<p style="color: red">v-pre 这是一个跳过这个元素和它的子元素的编译过程</p>
			<p><span v-pre>{{ 被包括的vue语言全都无效化！！ }}</span></p>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			new Vue({
				el: "#domo",
				data: {
					name: '<em>我爱你<span>而</span>你爱他</em>',
					src:'img/发生的事_画板 1.png',
					objCss:{
						color: 'blue',
						fontSize: '28px'
					},
					bool:false,
					arr: [{
							name: "大哥",
							age: 18,
							imgs: ['img/image (24).gif']
						}, {
							name: "二哥",
							age: 17,
							imgs: ['img/image (25).gif']
						}, {
							name: "三弟",
							age: 19,
							imgs: ['img/image (26).gif']
						}, {
							name: "四弟",
							age: 20,
							imgs: ['img/image (27).gif']
						}],
					name1: "lemon",
					name2: "enenenen",
					name3: "DASDA",
					name4: "eDASDASF",
					type:'B',
				},
				methods:{
					showClick(){
						this.name="ddddd",
						this.bool=!this.bool,
						alert("取消隐藏")
						this.type='D'
					}
				},
				
				
			})
		</script>
	</body>

</html>

展示地址：[http://cth1688.qicp.vip/vue%20api.html]

这是一个VUE指令的用法大集合，后面再深入说下他的路由功能。

觉得有帮助的话给个赞呗！

⎛⎝陈嗯嗯⎠⎞

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
Vue最全指令大集合————VUE

Vue指令大集合（无slot）包含内容：v-cloakv-htmlv-textv-bindv-showv-modelv-forv-if v-else-if v-elsev-pre代码如下：（可以自己复制去看一下）<!DOCTYPE html><html> <head> <meta charset="UTF-...
复制链接

扫一扫