vue.js属性绑定示例

最新推荐文章于 2024-06-12 08:41:10 发布

mischen520

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量133

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/miachen520/article/details/115581266

版权

vue.js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
	    <!--app是根容器 -->
        <div id="app">
		    <h1>{{ greet('afternoon') }}</h1>
		    <p>姓名：{{ name }}</p>
			<p>工作：{{ job }}</p>
			 <!--a标签跳网页需要绑定事件 -->
			<a v-bind:href="website">我的csdn博客</a>
			<input type="text" v-bind:value="website"></input>
			<p v-html="websiteTag"></p>
		</div>
		<script src="app.js"></script>
    </body>
</html>

//实例化vue对象
new Vue({
	el:"#app",
	data:{
	   name:"mischen",
	   job:"web开发",
	   website:"https://blog.csdn.net/miachen520",
	   websiteTag:"<a href='https://blog.csdn.net/miachen520'>newWebsite</a>"
	},
	methods:{
		greet: function(time){
			//拿到当前实例化对象
			return 'Good '+ time + " "+ this.name+'!';
		}
	}
});

从上面可以发现，vue如果需要跳转相应的链接，在a标签必须加v-bind绑定事件，这样才能取到它相应的值；除此之外，也可以在js中声明data，在data里面添加a标签，

页面效果如下所示：