目录

easy vue3 - 01 模版语法

目录

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

  1. 插值语法, 又叫 胡子语法 , 使用 {{ xxx }} 方式在 标签体 渲染变量
<h3>插值语法: {{ name }}</h3>

https://assets.tangx.in/blog/easy-vue-01/20220322003358.png

  1. 指令语法 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>

https://assets.tangx.in/blog/easy-vue-01/20220322003350.png

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

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

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

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

https://assets.tangx.in/blog/easy-vue-01/20220322003700.png