释放双眼,带上耳机,听听看~!
指令:标签上的一个属性(vue定义的属性)v-text:类似于innerText
用法:v-text=”一句话表达式(js)”
一句话表达式:
- 变量
- 运算 (三元表达式 boolean值?true的结果:false结果 )
功能:全局替换当前标签的文本内容为v-text的值
简写模式: {{}} 插值语法
- 用法:插值语法标签的文本区域 {{一句话表达式(js)}}
- 功能:部分替换标签内文本内容
- 实际使用主体是插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<div v-text="msg">123456</div>
<div>123456{{msg}}</div>
<!-- <div v-text="if(true){return msg}"></div> -->
<div>{{1+1}}</div>
<div v-text="false?'true的结果':'false的结果'"></div>
<div>{{"姓名:"+obj.name}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "这是一个寂寞的天,下着有些伤心的雨",
obj: {
name: "张三",
},
},
});
</script>
</body>
</html>
内容投诉