Vue模板语法

最新推荐文章于 2024-07-16 17:20:09 发布

魂&梦

最新推荐文章于 2024-07-16 17:20:09 发布

阅读量162

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44564263/article/details/125927996

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

v-bind可以给标签中的任何属性动态绑定值；

v-bind可以简写成英文状态下的 :

插值语法

功能: 用于解析标签体内容；

语法:{{xxx}} ，xxxx会作为js 表达式解析；

指令语法

功能: 解析标签属性、解析标签体内容、绑定事件；

举例：v-bind:href = 'xxxx' ，xxxx会作为js 表达式被解析；

说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8"/>

        <title>Vue模板语法</title>

        <!-- 引入vue -->

        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body> 

        <!-- 准备一个容器 -->

        <div id="root">

            <h1>插值语法</h1>

            <h3>你好，{{name}}</h3>

            <hr/>

            <h1>指令语法</h1>

            <a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}1</a>

            <!-- v-bind的简写语法 -->

            <a :href="school.url">点我去{{school.name}}2</a>

        </div>



        <script type="text/javascript" >

        Vue.config.productionTip=false;//阻止 vue 在启动时生成生产提示。

        new Vue({

            el:'#root',

            data:{

                name:'jack',

                school:{

                    name:'百度',

                    url:'http://www.baidu.com',

                }

            }

        })

        </script>

    </body>

</html>

结果：