Vue 属性绑定

最新推荐文章于 2025-07-11 17:31:22 发布

原创最新推荐文章于 2025-07-11 17:31:22 发布 · 906 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#属性绑定

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Vue.js中使用v-bind指令绑定数据到HTML元素，包括超链接和输入框的绑定，并展示了如何通过CDN引入Vue库进行快速开发。

快速上手本来没有了解CDN模式，但巩固有些东西的时候还是绕不过~

在这里插入图片描述

v-bind 绑定超链接

test.js实例化vue对象

// 实例化vue对象
new Vue({
	el: '#vue_det',
	data: {
		site: "菜鸟教程",
		url: "http://www.runoob.com",
		alexa: "10000"，
		websiteTag:"<a href='http://www.runoob.com'>菜鸟教程</a>"
	},
	methods: {
		details: function() {
			return  this.site + " - 学的不仅是技术，更是梦想！";
			}
		}
	})

绑定 value值

在这里插入图片描述

绑定标签

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

<head>
  <meta charset="utf-8">
  <title>element-starter</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
	<div id="vue_det">
		<input type="text" v-bind:value="site"/>
		<a v-bind:href="url">http://www.runoob.com</a>
		
		<br />
		
		<input type="text" value="菜鸟教程"/>
		<a v-bind:href="url">http://www.runoob.com</a>
	  
	  <br />
	  <p v-html="websiteTag"></p>
	</div>
	<script src="test.js"></script>
	
	<!--
  <div id="app"></div>
  -->
</body>

</html>