Vue的模板语法

最新推荐文章于 2024-08-21 22:17:11 发布

吱吱呀呀呆

最新推荐文章于 2024-08-21 22:17:11 发布

阅读量36

点赞数

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

本文链接：https://blog.csdn.net/weixin_45058750/article/details/130530991

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了Vue.js中的插值语法和指令语法，包括v-bind用于单项数据绑定，以及v-model实现双向数据绑定，特别是它们在处理表单元素时的应用。示例代码展示了如何在HTML中使用这些语法进行数据交互。

摘要由CSDN通过智能技术生成

插值语法&指令语法

插值语法

主要管理标签体的内容。
写法： {{xxx}} xxx是js表达式，且可以直接读取到data中的所有属性。

指令语法

功能：用于解析标签（包括：标签属性，标签体内容、绑定事件，，，）
举例：v-bind:href=“xxx” 或者简写为:href=“xxx”,xxx同样要写js表达式，且可以读取到data中所有属性。
备注：Vue中有很多的指令，且形式都是v-xxxx。

单项数据绑定 v-bind

单项数据绑定，vue中的data属性值改变后，页面数据改变，但是页面数据改变后，Vue的data属性值不变。

v-bind:value 简写为:value

双向数据绑定 v-model

数据绑定后，一个位置的数据发生改变，另一个同步改变。
注意：

双向数据绑定只适用于表单类元素（输入类元素）上。
v-model:value 可以简写成 v-model ,因为v-model只用于绑定value值。

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue/vue.js"></script>
</head>

<body>

    <div id="app">
        单项数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name2"><br>
    </div>
</body>

<script>
    Vue.config.productionTop = false

    new Vue({
        el: '#app',
        data: {
            name: '百度一下',
            name2: "双向绑定"
        }
    })
</script>

</html>