easy vue3 - 01 模版语法
目录
在 vue 中渲染变量通常有两种方式
- 插值语法， 又叫 胡子语法 ， 使用
{{ xxx }}方式在 标签体 渲染变量
<h3>插值语法: {{ name }}</h3>
- 指令语法
v-bind:attr="xxxx",v-bind可以缩写为冒号 :， attr 是 标签属性 名称； xxx 是属性标签值， 且 xxx 是 js 表达式
<h3>指令语法</h3>
<a :href="url"> 百度一下 ( : ) </a>
<br>
<a v-bind:href="url"> 百度一下 ( v-bind ) </a>
<a date="date.Now()"> 123</a>
这里再次 强调一下, xxx 是 js 表达式 而非简单的变量名称。
例如， 下面例子中， 使用了字符串的转大些字母 xxx.toUpperCase() 的方法。
<h3>指令语法</h3>
<a :href="url"> 百度一下 ( : ) </a>
<br>
<a v-bind:href="url.toUpperCase()"> 百度一下 ( v-bind ) </a>
从结果中可以看到， 被渲染的 url 地址全部是大写字母
