Vue2.0模板语法-插值

 时间:2026-04-26 02:29:37

1、新建html文件,直接引用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue2.0模板语法-插值

2、数据绑定用的方式是使用 {{...}}(双大括号)的文本插值:

<div id="app">{{msg}}</div>:双大括号会将数据解释为普通文本;

Vue2.0模板语法-插值

Vue2.0模板语法-插值

3、你需要使用 v-html 指令:渲染输出html标签:<p v-html>{{rawHtml}}

Vue2.0模板语法-插值

Vue2.0模板语法-插值

4、v-bind 指令为html标签绑定属性,<img v-bind:src="imageSrc">,imageSrc的值放在vue实例应用中;

Vue2.0模板语法-插值

Vue2.0模板语法-插值

5、在插值中使用 JavaScript 表达式{{ number + 1 }}

Vue2.0模板语法-插值

Vue2.0模板语法-插值

6、在插值中使用 JavaScript 表达式——三元运算:{{ ok ? 'YES' : 'NO' }}

Vue2.0模板语法-插值

Vue2.0模板语法-插值

7、在模板语法中使用复杂的函数运算{{ message.split('').reverse().join('') }}

Vue2.0模板语法-插值

Vue2.0模板语法-插值

  • Vue2.0添加点击事件
  • Vue2.0声明式渲染
  • IntelliJ IDEA怎么设置输入时开始模板设置插值
  • Vue2.0 v-if条件渲染
  • Vue2.0数据与方法
  • 热门搜索
    法语我爱你怎么写 寿司怎么卷 御宝羊奶粉怎么样 向大大内衣怎么样 海蟹怎么做好吃 写小说怎么赚钱 鳄鱼龟怎么养 西安文理学院怎么样 心率不齐怎么办 舌头疼怎么办