vue基础指令

最新推荐文章于 2024-07-09 00:17:48 发布

东海029

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量80

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/dongzh029/article/details/119430781

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、v-bind
常用于绑定“title”标签，示例如下：

<div id = 'app2'>
			<span v-bind:title="msg">{{message}}</span>
</div>```

```javascript
var vm2 = new Vue({
			el:'#app2',
			data:{
				message:"页面加载于" + new Date().toLocaleString()
			}
		})

二、v-if
用于判断条件是否成立，根据条件改变DOM状态

<div id = 'app3' v-if="seen">现在你可以看到我</div>

var vm3 = new Vue({
			el:'#app3',
			data:{
				seen:true,
				// seen:false
			}
		})

v-if也可以与v-else-if、v-else结合使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id = 'app'>
			<p v-if="age_value < 20">我是青少年，年龄是{{age_value}}</p>
			<p v-else-if="age_value >= 20 && age_value < 50">我是中年人,年龄是{{age_value}}</p>
			<p v-else-if="age_value >= 50 && age_value < 120">我是老年人,年龄是{{age_value}}</p>
			<p v-else>年龄错误</p>
			<input v-model="age_value"/>
		</div>
		
	</body>
	<script>
		var vm9 = new Vue({
			el:'#app',
			data:{
				age_value:''
			}
		})
	</script>
</html>

在这里插入图片描述

三、v-for
用于循环，常用来绑定列表，渲染数组数据

<div id = 'app4'>
			<ol><li  v-for="item in items">{{item.text}}</li></ol>
		</div>

var vm4 = new Vue({
			el:'#app4',
			data:{
				items:[
					{text:"我昨天在西安"},
					{text:"我今天在唐山"},
					{text:"我明天要去上海了"}
				]
				
			}
		})

再举一个栗子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id = 'app8'>
			<li v-for="item in items">{{item.value}}</li>
		</div>
		<div id = 'app9'>
			<ol v-for="value of object">{{zongpaiming}}-{{value}}</ol>
		</div>
	</body>
	<script>
		var vm8 = new Vue({
			el:"#app8",
			data:{
				items:[{value:"姓名：吴亦凡"},
					{value:"别名：吴签"}]					
			}
		})
		var vm9 = new Vue({
			el:"#app9",
			data:{
				zongpaiming:'2020东京奥运会',
				object:{
					paiming:"金牌榜排名:2",
					jinpai:"金牌数:38",
					yinpai:"银牌数:32",
					tongpai:"铜牌数:18"
				}
			}
		})
	</script>
</html>

在这里插入图片描述

四、v-on
用于添加事件监听器，常用来绑定“button”标签的“click”事件方法

<div id = 'app5'>
			<p>{{message}}</p>
			<button v-on:click = "reversemessage">反转按钮</button>
		</div>

var vm5 = new Vue({
			el:'#app5',
			data:{
				message:"Hello world!"
			},
			methods:{
				reversemessage:function(){
					this.message = this.message.split('').reverse().join('')
				}
				
			}
		})

五、v-modle
用来实现表单输入和应用状态之间的双向绑定，常绑定“input”标签

<div id = 'app6'>
			<p>{{message}}</p>
			<input v-model="message"/>
		</div>

var vm6 = new Vue({
			el:'#app6',
			data:{
				message:"BOTS"
			}
		})

六、v-once
v-once指令能使文本插值只执行一次，当数据改变时，插值处的文本不会改变

<div id = 'app'>
			<p v-once>{{msg}}</p>
			<p>{{msg}}</p>
			<button v-on:click="changemsg">点击改变</button>
		</div>

var vm = new Vue({
			el:'#app',
			data:{
				msg:"最近怎么老是在下雨啊"
			},
			methods:{
				changemsg:function(){
					this.msg = "看样子明天就天晴了"
				}
			}
		})

点击按钮前
点击按钮后
七、v-html
当需要在插值处不显示文本，而显示HTML时，就需要用到v-html了

<div id = 'app'>
			<p>没使用v-html指令：{{msg}}</p>
			<p v-html="rawhtml">使用了v-html指令：{{rawhtml}}</p>
		</div>

var vm = new Vue({
			el:"#app",
			data:{
				msg:'<span style="color:blue">我是蓝色，大号字体</span>',
				rawhtml:'<span style="color:red">我是红色，大号字体</span>'
			}
		})