网站推广的案例,河南的网络推广公司,重写Wordpress的js,ui设计培训机构哪家好插值表达式语法#xff1a;{{}}
使用时请注意以下几点#xff1a; 插值表达式是vue框架提供的【指令】 插值表达式中 不可以写代码片段 会报错 属性节点中不能使用插值表达式#xff0c;如果要为元素节点动态绑定数据#xff0c;我们要用v-bind动态绑定属性#…插值表达式语法{{}}
使用时请注意以下几点 插值表达式是vue框架提供的【指令】 插值表达式中 不可以写代码片段 会报错 属性节点中不能使用插值表达式如果要为元素节点动态绑定数据我们要用v-bind动态绑定属性下篇文章讲
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title!-- 1.导入包 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
/head
body!-- 2.添加id为app的div将来要被vue控制--div idapp!-- 注意 这是{{}} 其实是vue框架提供的【指令】 --!-- {{}} 语法 叫做 插值表达式 --p{{msg}}/p hrp{{msg.length}}/p hrp{{msg ~~~~~}}/p hrp{{dlag ? 条件为真 : 条件为假}}/p hr!-- 插值表达式中 不可以写代码片段 会报错--!-- p{{for(var i 0 ; i 5 ; i){}}}/p --h1 titlehello娃哈哈/h1!-- 3.注意属性节点中不能使用插值表达式 --!-- 如果要为元素节点动态绑定数据我们要用其他方法 --!-- h1 title{{msg}}娃哈哈/h1 --/div!-- 注意如果指令想要生效必须放在vue控制的区域内 --!-- h1{{msg}}/h1 --script// 3.创建vue实例对象并指定要控制的页面区域const vm new Vue({// VM 实例对象会监听data中每一项数据的变化// 只要监听到了数据的改变就会重新把el指定区域中的所有指令// 从新解析一遍el:#app,// 要控制页面上的哪个区域data:{//表示页面上要渲染的数据msg:我是geyao!,flag:true}})
/script/body
/html
