web前端全系列 教程
1839个小节阅读:2244.4k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。
最基本的数据绑定形式是文本插值,它使用的是“Mustache”语法 (即双大括号):
xxxxxxxxxx
<template>
<p>{{ msg }}</p>
</template>
<script>
export default {
data(){
return{
msg:"神奇的魔法"
}
}
}
</script>
每个绑定仅支持单一表达式,也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return
后面
xxxxxxxxxx
<template>
<p>{{ number + 1 }}</p>
<p>{{ ok ? 'YES' : 'NO' }}</p>
<p>{{ message.split('').reverse().join('') }}</p>
</template>
<script>
export default {
data(){
return{
number:10,
ok:true,
message:"大家好"
}
}
}
</script>
xxxxxxxxxx
<!-- 这是一个语句,而非表达式 -->
{{ var a = 1 }}
<!-- 条件控制也不支持,请使用三元表达式 -->
{{ if (ok) { return message } }}
双大括号将会将数据插值为纯文本,而不是 HTML。若想插入 HTML,你需要使用 v-html
指令
xxxxxxxxxx
<template>
<p>纯文本: {{ rawHtml }}</p>
<p>属性: <span v-html="rawHtml"></span></p>
</template>
<script>
export default {
data(){
return{
rawHtml:"<a href='https://itbaizhan.com'>百战程序员</a>"
}
}
}
</script>
实时效果反馈
1. 下列那个语句可以作为模板语法中的语句:
A {{ var a = 1 }}
B {{ if (ok) { return message } }}
C {{ message.split('').reverse().join('') }}
D {{ if (ok) {} else {} }}
答案
1=>C