vue模板语法（包含计算器小案列+Tab选项卡）

最新推荐文章于 2023-02-10 16:07:42 发布

耳火

最新推荐文章于 2023-02-10 16:07:42 发布

阅读量207

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/GENFLY/article/details/106612410

版权

前端渲染？：
把数据填充到HTML标签中去；
后台数据经过前端模板添加形成前端渲染（静态HTML内容）

前端渲染方式：
1.原生js拼接字符串
2.使用前端模板引擎
3.使用vue特有模板语法

模板语法：
差值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

案例：简单计算器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>counter</title>
</head>
<body>
	<div id="app">
		<h1>vue简单计算器</h1>
		<div>
			<span>数值A:</span>
			<span><input type="text" name="" v-model='a'></span>
		</div>
		<div>
			<span>数值B:</span>
			<span><input type="text" name="" v-model='b'></span>
		</div>
		<div>
			<button v-on:click='handle'>计算</button>
		</div>
		<div>
			<span>计算结果:</span>
			<span v-text='result'></span>
		</div>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#app",
			data:{
                a:'',
                b:'',
                result:'',
			},
			methods:{
				handle:function(){
					this.result=parseInt(this.a)+parseInt(this.b);
				}
			}
		});
	</script>
</body>
</html>

个人总结：添加绑定事件，处理函数实现计算逻辑，将字符串拼接转换为整数

案例：Tab选项卡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.tab ul{
			overflow:hidden;
			padding: 0;
			margin: 0;
		}
		.tab ul li{
			box-sizing: border-box;
			padding: 0;
			float: left;
			width: 100px;
			height: 45px;
			line-height: 45px;
			list-style: none;
			text-align: center;
			border-top: 1px solid blue;
			border-right: 1px solid blue;
            cursor: pointer;
		}
		.tab ul li:first-child{
			border-left: 1px solid blue;
		}
		.tab ul li.active{
			background-color: orange;
		}
		.tab div{
              width: 500px;
              height: 300px;
              display: none;
              text-align: center;
              font-size: 30px;
              line-height: 300px;
              border-top: 0px;

		}

		.tab div.current{
			display: block;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="tab">
		<ul>
			<li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
		</ul>
		<div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item,index) in list'>
			<img :src="item.path">
		</div>
	</div>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		
		var vm =new Vue({
			el:'#app',
			data:{
				currentIndex:0,//选项卡当前索引
                list:[{
                	id:1,
                	title:'apple',
                	path:'img/135.jpg'
                },
                {
                	id:2,
                	title:'orange',
                	path:'img/191.jpg'
                },
                {
                	id:3,
                	title:'lemon',
                	path:'img/327.jpg'
                }]
			},
			methods:{
				change:function(index){
					//在这里实现选项卡切换操作：本质就是操作类名，通过currentIndx
					this.currentIndex=index;
					
					
				}
			}
		});
	</script>
</body>
</html>

个人总结：重点是提供currentIndex属性，通过当前索来实现选项卡切换。

耳火

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue模板语法（包含计算器小案列+Tab选项卡）

前端渲染？：把数据填充到HTML标签中去；后台数据经过前端模板添加形成前端渲染（静态HTML内容）前端渲染方式：1.原生js拼接字符串2.使用前端模板引擎3.使用vue特有模板语法模板语法：差值表达式指令事件绑定属性绑定样式绑定分支循环结构案例：简单计算器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>counter&lt
复制链接

扫一扫