毕设：week4-vue.js：Vue的属性绑定

最新推荐文章于 2023-11-30 10:09:41 发布

cs_rookie

最新推荐文章于 2023-11-30 10:09:41 发布

阅读量157

点赞数

分类专栏：毕业设计毕设

本文链接：https://blog.csdn.net/qq_33516656/article/details/100069617

版权

毕设同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

毕业设计

10 篇文章 0 订阅

订阅专栏

Vue的属性绑定

1、首先在app.js中，添加一下属性
在这里插入图片描述
2、接下将我们绑定的Vue的官网网址绑定到我们的a标签中
猜想：如果按照我们的套路，我们可以在a标签中href中写入{{website}}，刷新网页是不是就可以满足我们的期望：点击超链接，可以到达vue的官网网站呢？我们试试！

<a href="{{website}}">vue官网</a>

在这里插入图片描述猜想失败！
怎么才能实现我们期望呢？
2、用v-bind来修饰下属性，v-bind:用于给html标签设置属性。
在href前面用v-bind来修饰下，看看效果！

<a v-bind:href="website">vue官网</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
   <!-- 将title改为vue.js -->
    <title>vue.js</title>
    <!-- 引入cli -->
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- vue-app是根容器 -->
<div id="vue-app">
<h1 class="h1">个人信息</h1>
<h2 class="h2">{{greet()}}</h2>
<table class="table">
    <tbody>
        <tr>
            <td>姓名：</td>
            <td>{{name}}</td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td>{{age}}</td>
        </tr>
        <tr>
            <td>职业：</td>
            <td>{{job}}</td>
        </tr>
        <tr><td><a v-bind:href="website">vue官网</a>
</td></tr>
    </tbody>
</table>
</div>
<!-- 引入一个script,独立出一个app.js文件 -->
<script src="app.js"></script>
</body>
</html>

在这里插入图片描述

目标已经达成！！！这就是一个简单的数据绑定！
3、我们也可以绑定其他的属性，例如我们绑定input标签的value属性

看看效果：
4、用v-html来绑定标签

注意：v-bind的语法是冒号：，而v-html的语法是=