Vuejs之路之--模板语法（）

最新推荐文章于 2024-08-03 10:41:31 发布

初心鸿鹄

最新推荐文章于 2024-08-03 10:41:31 发布

阅读量813

点赞数

分类专栏： Vue 文章标签： vue 指令插值

本文链接：https://blog.csdn.net/codesWay/article/details/76651999

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue指令和插值</title>
</head>
<body>
	<div class="container" id="outBox">
		<!-- 文本： v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。 -->
		<div class="ban" v-once>{{infor.name}}</div>
		<!-- 双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：类似于下面，注意v-html的值是你想要输出的值，这个值前提是标签字符串 -->
		<div class="ban" v-html = "infor.third"></div>
		<!-- Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令来绑定属性 v-bind:属性名 = 属性值，具体如下 -->
		<input type="text" name="poem" v-bind:placeholder = "infor.sec">
		<button v-bind:disabled= "!infor.judge">{{infor.name}}</button>
		<!-- javascript 表达式 -->
		<div>{{infor.name+"adafa"}}</div>
		<!-- 三元表达式：当infor.judge是真的时候显示infor.name否则显示infor.sec,条件判断只能是三元表达式 -->
		<div style="color: red">{{infor.judge?infor.name:infor.sec}}</div>
		<!-- javascript处理表达式，应该还有更多的想象，敬请关注 -->
		<h1>{{infor.ABC.split("").join(",")+Math.random()}}</h1>



		<!-- 指令:一些指令能接受一个“参数”，在指令后以冒号指明,例如v-on指令v-on：click等等 -->
		<a v-bind:href = "infor.href1" v-if = "infor.judge">百度一下</a>
		<!-- 修饰符 -->
		<!-- 修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()： 对于下面的例子submit是事件名，.prevent是修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault(),在执行onSubmit函数的时候-->


		<form v-on:submit.prevent="onSubmit"></form>
	</div>
	<script type="text/javascript" src = "https://unpkg.com/vue"></script>
	<script type="text/javascript" src = "js/init.js"></script>
</body>
</html>

虽然只是Vue指令中的一部分，但是却依然有意义，更多指令还在后面呢，对于其中一些指令的理解已经在上面注释清楚了，以作回顾......