在 vue 中渲染变量通常有两种方式

  1. 插值语法， 又叫 胡子语法 ， 使用 {{ xxx }} 方式在 标签体 渲染变量
1

<h3>插值语法: {{ name }}</h3>

20220322003358

  1. 指令语法 v-bind:attr="xxxx", v-bind 可以缩写为 冒号 :， attr 是 标签属性 名称； xxx 是属性标签值， 且 xxx 是 js 表达式
1
2
3
4
5
6

<h3>指令语法</h3>
<a :href="url"> 百度一下 ( : ) </a>
<br>
<a v-bind:href="url"> 百度一下 ( v-bind ) </a>

<a date="date.Now()"> 123</a>

20220322003350

这里再次 强调一下, xxx 是 js 表达式 而非简单的变量名称。

例如， 下面例子中， 使用了字符串的转大些字母 xxx.toUpperCase() 的方法。

1
2
3
4

<h3>指令语法</h3>
<a :href="url"> 百度一下 ( : ) </a>
<br>
<a v-bind:href="url.toUpperCase()"> 百度一下 ( v-bind ) </a>

从结果中可以看到， 被渲染的 url 地址全部是大写字母

20220322003700