Vue.js的学习记录_2

原创于 2019-03-13 15:35:28 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

——Vue.js 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在Vue.js中使用v-bind进行数据绑定，包括绑定href链接和输入框的value值，以及如何在前端页面上正确显示HTML标签元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据绑定

Vue.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Data Binding</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="Vue-app">
        <h1>Data Binding</h1>
        <a v-bind:href = "website">百度一下，你就知道！</a>
        <input type="text" v-bind:value = "Name">
        <p v-html="websiteTag" > </p>
    </div>
    <script src="app.js"></script>
</body>
</html>

vue.js

new Vue({
    el: '#Vue-app',
    data: {
        website: 'http://www.baidu.com',
        Name: 'Dan-Xiang-Jian-Tou',
        websiteTag: '<a href="http://www.baidu.com">百度一下，你就知道！</a>'
    }
})