vue文档学习
模板语法
文本
数据绑定最常见的形式就是使用“Mustache”(双大括号) 语法的文本插值
<span>Message: {{ msg }} </span>
一般配合js中的data() 设置数据
export default{ name:'HelloWorld', data(){ return{ msg:"消息提示" } } }
原生html
双大括号会将数据解释为普通文本,而非HTML代码。
为了输出真正的HTML,你需要使用v-html指令。
<p>Using mustaches: {{ rawHtml }} </p> <p>Using v-html directive: <span v-html="rawHtml"></span></p
data(){ return { rawHtml:"<a href='https://www.itbaizhan.com'>百站</a>", message:"学习Vue" } }
屬性Attribute
Mustache 语法不能在HTML属性中使用,然而,可以使用v-bind指令
<div v-bind:id=“dynameicId"></div>
data(){ return { dynamecId:1001 } }
温馨提示 v-bind: 可以简写成 i
使用JavaScript表达式
在我们的模板中,我们一直都只绑定简单的property键值,Vue.js都提供了完全的javaScript表达式支持。
{{num+20}} {{flage ? '孙':'好在'}} num:10 {{ message.split('').reverse().join('') }}
这些表达式会在当前活动实例的数据作用域下作为JavaScript被解析。
有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式:--》 {{ var a =1 }} <!-- 流程控制也不会生效 使用三元表达式 --> {{ if (ok) {return message} }}
<template> <div class="hello"> <h3>学习vue3:模板语法</h3> <p>{{ message }}</p> <div>{{ rawHtml }}</div> <div v-html="rawHtml"></div> <div v-bind:id="dynameicId"></div> </div> </template> <script> export default { name:'HelloWorld', data(){ return { message:"测试", rawHtml:"<a href='http://www.itbaizhan.com'>百战</a>", dynameicId:10001 } } } </script>