Vue模板语法（01）

最新推荐文章于 2024-08-14 18:44:30 发布

雨沐笙

最新推荐文章于 2024-08-14 18:44:30 发布

阅读量283

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_62604616/article/details/126668826

版权

本文详细介绍了Vue的模板语法，包括插值、指令、过滤器、计算属性和监听属性的使用，通过实例展示了v-if、v-show、v-for等核心指令的功能，以及购物车案例的实现。

摘要由CSDN通过智能技术生成

一、插值

①、文本

语法：{ {定义的变量}}

②、html

语法：

v-html="定义的变量"

③、属性绑定

语法：

<!-- 方法一 -->
v-bind:value="定义的变量"
<!-- 方法二 -->
:value="定义的变量"

④、表达式

Vue提供了完全的JavaScript表达式支持

⑤、class绑定

语法：

:class="定义的变量"

⑥、style绑定

语法：

:style="定义的变量"

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
		<style>
			.a{
				color:yellow;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>文本</p>
			{
   {msg}}
			<hr />
			<p>html页面转义</p>
			<div v-html="htmlstr"></div>
			<hr />
			<p>v-bind 属性绑定</p>
			<input value="值"/>
			<input v-bind:value="valuestr"/>
			<input :value="valuestr"/>
			<hr />
			<p>vue中可以对变量进行二次处理</p>
			{
   {str.substring(0,4)}} <br />
			{
   {num+4}}<br />
			{
   {ok ? '1' : '0'}}<br />
			<span :id="idstr+'1'">书籍信息</span>
			<hr />
			<p>class绑定</p>
			<span :class="calssStr">文本内容</span>
			<hr />
			<p>style绑定</p>
			<span :style="styleStr">文本内容</span>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return{
						//文本
						msg:'你好啊 云鹤衫！！',
						//html转义
						htmlstr:'<span style="color:red;">文本内容</span>',
						//属性绑定
						valuestr:'云鹤衫',
						//表达式
						str:'hello world',
						num:6,
						ok:false,
						idstr:'book_',
						// class绑定
						calssStr:'a',
						// style绑定
						styleStr:'color:blue;'
					}
				}
			})
		</script>
	</body>
</html>

效果：

id绑定效果：

二、指令

简介ÿ

最低0.47元/天解锁文章

雨沐笙

关注

0
点赞
踩
0

收藏

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

v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"核心指令：v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model。v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素。v-bind/v-on/v-model这三个指令已经在上一篇博客中使用过。（3）v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作。
复制链接

扫一扫