郑州企业做网站h汉狮,卡盟网站怎么做图片素材,洛阳市宜阳建设局网站,项城市建设方案公示在哪个网站模板语法有两大类#xff1a; 1.插值语法 2.指令语法 让我为大家介绍一下吧#xff01;
一、插值语法
功能:用于解析标签体内容。 写法: {{xxx}}#xff0c;xxx是js表达式#xff0c;且可以直接读取到data中的所有属性。 举个例子#xff1a;
!DOCTYPE html1.插值语法 2.指令语法 让我为大家介绍一下吧
一、插值语法
功能:用于解析标签体内容。 写法: {{xxx}}xxx是js表达式且可以直接读取到data中的所有属性。 举个例子
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodydiv idroot!-- 我们发现name已经被解析为了张三 --div我的名字叫{{name}}/div!-- 我有一个叫做李四的同学 --div我的名字叫{{name}}/div/div
/body
script src../JS/vue.min.js/script
scriptconst vm new Vue({el:#root,data:{name:张三,name:李四}})
/script
/html我们发现全是李四我想保留张三怎么做 我教大家一个方法我们可以使用对象的形式去做来看代码
bodydiv idroot!-- 我们发现name已经被解析为了张三 --div我的名字叫{{name}}/div!-- 我有一个叫做李四的同学 --div我的名字叫{{school.name}}/div/div
/body
script src../JS/vue.min.js/script
scriptconst vm new Vue({el:#root,data:{name:张三,school:{name:李四}}})
/script二、指令语法
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…) 举例:v-bind;hrefxxx”或 简写为 :href“xxx”xxx同样要写js表达式且可以直接读取到data中的所有属性。 备注:Vue中有很多的指令且形式都是: v-???此处我们只是拿v-bind举个例子。
我们上个例子我们想用Vue的形式给a标签添加href转跳到某度
上代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodydiv idroot!-- 我们使用 v-bind: --a v-bind:hrefurl点击转跳/a!-- 我们可以使用简写形式直接就是 : --a :hrefurl我是简写形式点击转跳/a/div
/body
script src../JS/vue.min.js/script
scriptconst vm new Vue({el:#root,data:{url:https://www.baidu.com/}})
/script
/html由此可见我们可以使用插值语法给标签属性添加属性值
感谢大家的阅读如有不对的地方可以向我提出感谢大家
