首页> 基础笔记 >Vue学习笔记 Vue学习笔记
vue使用 JavaScript 表达式绑定文本及属性
作者：小萝卜 2024-03-08 【 Vue 】 浏览 69
简介在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上： 在文本插值中 (双大括号) 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中
在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：
在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中
<p>{{ number + 1 }}</p>
<p>{{ ok ? 'YES' : 'NO' }}<p>
<p>{{ message.split('').reverse().join('') }}<p>
<div :id="`list-${id}`"></div>
export default{
data(){
return{
number:1,
ok:false,
message:'hello world',
id:'appid'
}
}
}
仅支持表达式
每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。
因此，下面的例子都是无效的：
<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}
<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}
很赞哦！ (0)
