Vue模板语法（上）

最新推荐文章于 2022-01-11 11:24:58 发布

不稳定的化学元素

最新推荐文章于 2022-01-11 11:24:58 发布

阅读量119

点赞数

本文链接：https://blog.csdn.net/weixin_45174624/article/details/99750995

版权

插值

v-Html指令
我们可以在js里自定义html代码
属性v-bind（简写：）
HTML属性中的值应使用v-bind指令

v-bind:与v-model的区别

                        v-model是做数据双向绑定的指令
						v-bind只是将对应的值给填写到指定属性中
						例如：v-bind:value简单来说就是将值填写到value=""
						然后value的值发生改变，并不会影响vue实例中的变量值

表达式
可以截取我们想要的内容，动态生成id

Vue的插值案例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue的插值案例</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>文本</h3>
					{{msg}}
				</li>

				<li>
					<h3>html标签渲染</h3>
					<div v-html="htmlStr"></div>

				</li>

				<li>
					<h3>v-bind属性绑定指令</h3>
					<input type="text" value="22" />
					<input type="text" v-bind:value="age" />

				</li>

				<li>
					<h3>表达式</h3>
					{{str.substr(0,6).toUpperCase()}}
					{{ number + 1 }}
					{{ ok ? 'YES' : 'NO' }}
				<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				msg: 'hello Vue！！！',
				htmlStr: '<span style="color: crimson;">来了</span>',
				age: 23,
				str:'https://www.baidu.com',
				number:6,
				ok:true,
				id:19
				
			}
		})
	</script>
</html>

指令

条件指令（if elseif else）

可以对数据进行判断，然后分别执行相应的操作

v-show

可以监听文本框内容，当文本框插入文本时执行相对应操作

v-for

定义数组，可以对数组进行遍历，并可以获取其他的每个属性和下标

动态参数

可以根据我们输入的内容改变按钮所执行的事件

Vue的指令案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue的指令案例</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>分支</h3>

					<div v-if="score>90">A</div>
					<div v-else-if="score>80">B</div>
					<div v-else-if="score>70">C</div>
					<div v-else-if="score>60">D</div>
					<div v-else="">E</div>
					<input type="text" v-model="score" />

				</li>

				<li>
					<h3>v-show指令</h3>
					<div v-show="flag">出来吧</div>
					<!--分清楚v-if跟v-show的区别
					     v-if:控制的是标签是否打印
						 v-show:控制的是标签的样式
					
					-->
					<div v-if="flag">出来吧2</div>

				</li>

				<li>
					<h3>v-for指令</h3>
					<div v-for="item,index in data2">
						{{item.id}}~{{item.name}}~{{index}}<br>

					</div>

				</li>

				<li>
					<h3>v-fshow指令</h3>
					<button v-on:click="lll">动态事件调用</button>

				</li>

				<li>
					<h3>动态事件调用</h3>
					<button v-on:[evname]="lll">动态事件调用</button>
                    <input type="text"  v-model="evname"/>
				</li>


			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				score: 80,
				flag: true,
				data1: [1, 3, 6, 9, 14],
				data2: [{
						id: 1,
						name: '吃鸡'
					},

					{
						id: 2,
						name: '王者'
					},

					{
						id: 3,
						name: '英雄联盟'
					}
				]
			},
			methods: {
				lll() {
					console.log('lll方法被调用！！！')
				}
			}
		})
	</script>
</html>

过滤器

局部过滤器

和表达式有点像，可以截取一段我们想要的文本返回，可以自定义它出现的文本，是截取后的还是截取前的

局部过滤器可串联

在过滤完一个条件后还可以继续再过滤一个条件

全局过滤器

过滤完的内容不仅在一个页面可用，其他页面也可以用，需要配置文件，这里就不演示效果了

Vue的过滤器案例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue的过滤器案例</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>局部过滤的注册</h3>
					{{msg}}<br>
					{{msg|a}}<br />
					{{javaxl|a}}
				</li>

				<li>
					<h3>局部过滤器的串联</h3>
                         {{javaxl|a|b}}

				</li>

				<li>
					<h3>全局过滤器的注册</h3>
				</li>

			</ul>
		</div>
	</body>
	<script type="text/javascript">
		   Vue.filter('c',function(v){
			   console.log(v);
			   return v.substring(10, 16);
		   })
		
		new Vue({
			el: '#app',
			data: {
				msg: 'https://www.baidu.com',
				javaxl: 'https://www.javaxl.com'
			},
			filters: {
				//a是过滤器的名字,后面的函数是过滤器的作用
				'a': function(v) {
					console.log(v);
					return v.substring(0, 16);
				},

				'b': function(v) {
					console.log(v);
					return v.substring(5, 10);
				}

			}

		})
	</script>
</html>

计算属性和监听属性

计算属性

可以对两个文本框的内容继续加减乘除，可以即时得到结果

监听属性

可以给两个文本框加监听，一个文本框内容变了，另一个也会变
计算属性和监听属性联合用可以用来计算购物车总价即时刷新

Vue的计算属性监听属性案例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue的计算属性监听属性案例</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>计算属性</h3>
					单价：<input  v-model="price"/>
					数量：<input v-model="num" />
					总价:{{total}}
				</li>

				<li>
					<h3>监听属性</h3>
					km:<input v-model="km"/>
					m:<input v-model="m"/>

				</li>

				

				
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
			    price:16,
				num:1,
				km:1,
				m:1000
				},
				computed:{
					total(){
						return parseInt(this.price)*parseInt(this.num);
					}
				},
				watch:{
					km(v){
						this.m=v*1000;
					},
					m(v){
						this.km=v/1000;
					}
				}
				
			
		})
	</script>
</html>

谢谢观看哈

不稳定的化学元素

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue模板语法（上）

目录：插值指令过滤器计算属性和监听属性插值v-Html指令我们可以在js里自定义html代码属性v-bind（简写：）HTML属性中的值应使用v-bind指令v-bind:与v-model的区别 v-model是做数据双向绑定的指令 v-bind只是将对应的值给填写到指定属性中例如：v-bind:valu...
复制链接

扫一扫