网站首页 > 技术文章 正文
Vue模板语法
文本插值
文本差值最基本的形式一般有三种方式
一是使用两个花括号{{}}，二是使用v-once指令，三是使用v-text指令，下面用代码演示
body>
<div id="app">
<p>
<input type="text" v-model="msg" />
</p>
<p>{{msg}}</p>
<!--仅一次-->
<p v-once>{{msg}}</p>
<p v-text="msg"></p>
</div>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "123456"
}
})
</script>
</body>
三种方式均可实现文本插值。
2，表达式
文本插值也支持表达式形式的值，用于数值运算，三目判断以及筛选，下面用一个计算工资的例子演示。
<body>
<fieldset id="app">
<legend>工资计算器</legend>
<p>当月收入：<input type="text" v-model="gongzi"></p>
<p>奖金：<input type="text" v-model="jiangjin" name="" id=""></p>
<p>养老保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.077}}</p>
<p>医疗保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.019}}</p>
<p>失业保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.002}}</p>
<p>公积金：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.058}}</p>
<p>到手薪资：{{(parseFloat(gongzi)+parseFloat(jiangjin))*(1-0.077-0.019-0.002-0.058)}}</p>
<p>年薪：{{((parseFloat(gongzi)+parseFloat(jiangjin))*(1-0.077-0.019-0.002-0.058))*12}}</p>
</fieldset>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
gongzi: 0,
jiangjin: 0
}
})
</script>
</body>
————————————————
以上代码实现了工资的基本计算，由上可以看出，文本插值也支持数值运算。
3，指令
指令是Vue中一个重要的特性，主要提供了一种机制将数据的变化映射为DOM行为，指令的特殊属性便是带有“v-”前缀。
例：<av-bind:href="url"></a>
Vue绑定类样式和内联样式
在Vue中对属性的绑定一般使用v-bind指令（可缩写为“：”），而操作元素的class列表和内联样式是数据绑定的一个常见需求。
1，类样式
语法：<divv-bind:class="{类样式名:数据,...}"></div>
例：使用绑定类样式方式实现样式的绑定
<body>
<style>
.base {
width: 200px;
height: 200px;
}
.border {
border: 2px solid black;
transition: all 3s;
}
.box {
box-shadow: 15px 5px 15px 5px gray;
transition: all 3s;
}
.bgcolor {
background-color: aqua;
transition: all 3s;
}
.donghua:hover {
border-radius: 50%;
transition: all 3s;
}
</style>
<div id="app">
<input type="checkbox" v-model="border" name="check1" id="">边框
<input type="checkbox" v-model="box" name="check1" id="">阴影
<input type="checkbox" v-model="bgcolor" name="check1" id="">背景
<input type="checkbox" v-model="donghua" name="check1" id="">动画
<hr/>
<div class="base" v-bind:class="{border:border,box:box,bgcolor:bgcolor,donghua:donghua}"></div>
</div>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
border: false,
box: false,
bgcolor: false,
donghua: false
}
})
</script>
</body>
效果：
通过绑定类样式实现了效果。
2，内联样式
语法：<divv-bind:style="{样式属性:数据,...}"></div>
例：使用绑定内联样式实现效果
<body>
<div id="app" style="width: 100%;text-align: center;">
<img src="img/1.JPG" alt="" v-bind:style="allstyle">
</div>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
allstyle: {
"border": "2px solid black",
"border-radius": "10%",
"width": "50%"
}
}
})
</script>
</body>
条件渲染指令
Vue中提供v-if，v-else和v-show的条件渲染指令，这些条件指令可以根据表达式的值在DOM中选择渲染元素和组件。
v-if和v-else
语法：<divv-if="bool">
</div><divv-else></div>
例：使用条件渲染实现登录页面和注册界面的切换
<body>
<div id="app">
<input type="checkbox" v-model="isf" name="" id="">登录
<div v-if="isf">
<fieldset>
<legend>登录界面</legend>
<input type="text" placeholder="请输入账号" name="" id=""><br />
<input type="text" placeholder="请输入密码" name="" id="">
<p><button>登录</button></p>
</fieldset>
</div>
<div v-else>
<fieldset>
<legend>注册界面</legend>
<input type="text" placeholder="请输入账号" name="" id=""><br />
<input type="text" placeholder="请输入密码" name="" id=""><br />
<input type="text" placeholder="请再次输入密码" name="" id="">
<p><button>注册</button></p>
</fieldset>
</div>
</div>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isf: true
}
})
</script>
</body>
效果：
v-show指令
v-show的用法与v-if类似，不同的地方在于v-show指令只是实现切换css的display，同时也不支持< template >元素和v-else指令。
事件绑定
在vue中一般使用v-on来进行事件的绑定，实现监听DOM事件。
语法：<buttonv-on:click="方法">按钮</button>
例：实现简单四则远算。
<body>
<div id="app">
<p>x值：<input type="text" v-model="x"></p>
<p>y值：<input type="text" v-model="y"></p>
<p>
<button v-on:click="add()">+</button>
<button v-on:click="sub()">-</button>
<button v-on:click="mlt()">*</button>
<button v-on:click="div()">/</button>
</p>
<p>结果：{{result}}</p>
</div>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
x: 0,
y: 0,
result: 0
},
methods: {
add: function() {
this.result = parseFloat(this.x) + parseFloat(this.y);
},
sub: function() {
this.result = parseFloat(this.x) - parseFloat(this.y);
},
mlt: function() {
this.result = parseFloat(this.x) * parseFloat(this.y);
},
div: function() {
this.result = parseFloat(this.x) / parseFloat(this.y);
}
}
})
</script>
</body>
效果：
以及事件绑定时需要用到的修饰符：
.stop：相当于event.stopProagation()方法
.prevent：相当于event.preventDefault()方法
.capture：使用capture模式添加事件监听器
.self：只有事件在监听本身元素时才会触发回调
.once：点击事件仅触发一次
猜你喜欢
- 2024-11-21 初学Vue(一) -- Vue简单入门
- 2024-11-21 技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)
- 2024-11-21 新手自学前端开发的六个阶段
- 2024-11-21 Vue Shop Vite:轻量级前端开发的新神器
- 2024-11-21 实战 | 基于Vue语言的企业级前端开发框架Hui的应用研究
- 2024-11-21 前端图形学实战:从零开发几何画板(vue3 + vite版)
- 2024-11-21 循序渐进Vue+Element前端开发(14)—根据ABP后端接口实现前端界面
- 2024-11-21 1.8K Star!Cool-Admin-Vue:AI编码+流程编排，重新定义后台开发
- 2024-11-21 VUE3前端开发入门系列教程三:VITE热更新配置及WSL填坑
- 2024-11-21 后端Springboot+前端Vue开发的角色权限管理系统，源码免费分享
欢迎 你 发表评论:
- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作，推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份，“多备份”承诺的是成本更低，管理更高效#36氪开放日深圳站#
- 602℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 582℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 574℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍，制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作，推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份，“多备份”承诺的是成本更低，管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践（dataguard failover）
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论，来添加一个吧(●'◡'●)