1. 插值表达式 {{}}
| <script setup> let msg="hello vue!" </script> <template> <h1>{{ msg }}--{{ 1+1 }}--{{ msg+'sb' }}</h1> </template> |
2. Vue 常用指令 (以v- 开头)
2.1 v-html 替换标签元素内容，包含标签 v-text:替换文本内容
| <script setup> let span="<span style='color:red'>hello mm</span>" </script> <template> <h1 v-html="span"></h1> </template> |
2.2 v-bind: 绑定属性值/样式值指令 简写 :
| <script setup> let url='/src/assets/imgs/01.jpg' let width=160 let title='帅哥' </script> <template> <img v-bind:src="url" :width="width" :title/> </template> |
v-bind 实现Class样式绑定
1. v-bind:class后面指定样式对象
| <script setup> let url='/src/assets/imgs/01.jpg' let width=160 let title='帅哥' let c1=false let c2=true </script> <template> 样式对象 一个标签多个class样式{属性名:变量名....} <img v-bind:src="url" :width="width" :title :class="{c1:c1,c2:c2}"/> </template> <style scoped> .c1{ border-radius: 20px; } .c2{ box-shadow: 2px 2px 2px #cccccc, -2px -2px 2px #cccccc; |
