VUE模板语法

最新推荐文章于 2024-09-02 17:34:07 发布

shionlin2010

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量72

点赞数

分类专栏： VUE 文章标签：前端 vue

本文链接：https://blog.csdn.net/shionlin2010/article/details/125642730

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue模板语法有2大类:
插值语法：
功能：用于解析标签体内容
写法：{{xxx}}，xxx是 js 表达式，且可以直接读取到 data 中的所有属性
指令语法:
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx 同样要写 js 表达式，且可以直接读取到 data 中的所有属性

<div id="root">
    <h2>指令语法与插值语法的使用</h2>
    <hr>
        <a v-bind:href="Bing_url">{{Bing_title}}</a>
        <a :href="BaiDu_url">{{BaiDu_title}}</a>
</div>
<script type="text/javascript">
    const x= new Vue({
    el:'#root',
    data:{
        Bing_title:'必应',
        BaiDu_title:'百度',
        Bing_url:'http://www.bing.com',
        BaiDu_url:'http://www.baidu.com'
        }
    })
</script>