vue系列之二指令

最新推荐文章于 2023-12-18 22:51:58 发布

笨蛋-木呆呆

最新推荐文章于 2023-12-18 22:51:58 发布

阅读量253

点赞数

分类专栏： vue系列

本文链接：https://blog.csdn.net/qq_33401832/article/details/86181133

版权

vue系列专栏收录该内容

2 篇文章 0 订阅

订阅专栏

为了2019年，重新学一遍vue
个人理解，如有错误请指出

vue 里面以 v- 开的属性叫做指令。

v-model 双向绑定 && v-bind 绑定

拿个实例来说引入吧：
有一个文本框，同步显示并计算输入字符串的长度

<body>
<div id='app'>
	<input type="text" v-model="info"/><br/>
	输入的内容: {{info}}<br/>
	输入的长度: {{info.length}}
</div>
<script>
	new Vue({
		el: '#app', // el: 需要添加到的dom节点
		data: { // data: 存放数据
			info: ''
		}
	})
</script>
</body>

v-model 能够和 data 数据同步的的一个指令

v-bind 和 v-model 的区别在于能够显示 data 里面的值，但是却不会同步(一般说可控和不可控,不知道这个说法对不对)

<body>
<div id='app'>
	<div v-bind:title='info'>鼠标滑过试试</div>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			info: '显示提示信息'
		}
	})
</script>
</body>

v-bind 绑定 data里面的值可以省略为：

v-if 和 v-show 控制元素显示和不显示

<div id='app'>
	<div class="v-if">
		<div style="width: 100px;height: 100px;background: red;" v-if='info'>if有没空间</div><hr/>
		<div style="width: 100px;height: 100px;background: red;" v-if='!info'>if有没空间</div>
	</div><hr/>
	<div class="v-show">
		<div style="width: 100px;height: 100px;background: red;" v-show='info'>show有没空间</div><hr/>
		<div style="width: 100px;height: 100px;background: red;" v-show='!info'>show有没空间</div>
	</div>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			info: false
		}
	})
</script>

在这里插入图片描述

仔细看输出的两个红框部分：
v-if：当为false的时候节点直接不渲染
v-show：当为false的时候节点会多出一个样式 display：none

v-for 循环

一个固定的循环次数

<div id='app'>
	<ul>
		<li v-for="item in 9">
			{{item}}
		</li>
	</ul>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			
		}
	})
</script>

在这里插入图片描述
简单的循环数组

<div id='app'>
	<ul>
		<li v-for="(item, index) in info" :key="index">{{item}}</li>
	</ul>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			info: ['你好', '世界', '!']
		}
	})
</script>

在这里插入图片描述
在复杂一点的双重的循环

<div id='app'>
	<ul>
		<li v-for="(item, index) in info" :key="index">
			<ul>
				<li v-for='i in item.arr' :key='i.id'>name:{{i.name}}</li>
			</ul>
		</li>
	</ul>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			info: [{
				text: '你好',
				arr: [
					{name: '笨', id: 1},
					{name: '蛋', id: 2},
					{name: '呆', id: 3}
				]
			},{
				text: '世界',
				arr: [
					{name: '木', id: 1},
					{name: '呆', id: 2}
				]
			}]
		}
	})
</script>

在这里插入图片描述

v-for 可以嵌套循环，固定循环

v-on 监听事件

一个简单的显示隐藏

<div id='app'>
	<button v-on:click='toggle'>切换状态</button>
	<div v-show='flag'>我被控制显示还是隐藏</div>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			flag: false,
		},
		methods: { // 所有的事件都要写在 methods下面
			toggle() {
				this.flag = !this.flag;
			}
		}
	})
</script>

v-on 可以省略为 @ 符号

等等等… 夜深了，今天就到这里吧！

临走前再来一个：

绑定样式

<div id='app'>
	<div :style="{'width': wid + 'px'}">
		我被控制
	</div>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			wid: 200,
		}
	})
</script>

在这里插入图片描述

笨蛋-木呆呆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue系列之二指令

为了2019年，重新学一遍vue个人理解，如有错误请指出vue 里面以 v- 开的属性叫做指令。v-model 双向绑定 &amp;&amp; v-bind 绑定拿个实例来说引入吧：有一个文本框，同步显示并计算输入字符串的长度&lt;body&gt;&lt;div id='app'&gt; &lt;input type="text" v-model="info"/&gt;&
复制链接

扫一扫