vue.js入门（3-4）（methods，属性绑定）

最新推荐文章于 2024-07-24 10:24:30 发布

谢西顾

最新推荐文章于 2024-07-24 10:24:30 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/yiyiyixin/article/details/80306954

版权

vue.js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="vue-app">
	<h1>{{ name }}</h1>
	<h1>{{ a() }}</h1>
        <a v-bind:href="web">web开发</a> 
        <input type="text" v-bind:value="name">
        <p v-html="website"></p>
        </div>
	<script src="app.js"></script>
</body>

//app.js

new Vue({
	el:"#vue-app",
	data:{
		name:"001002003",
                web:"https://www.baidu.com/",
                website:"<a href='https://www.baidu.com/'>百度</a>"
         },
	methods:{
		a:function(){
			return "hello world"+this.name;
		}
	}
});

methods:方法（函数）

每个内容如el，data，methods要用逗号分隔开

如果要调用自身的data，直接this.属性即可

1.v-bind

属性绑定，网址要写全，v-bind

<input type="text" v-bind:value="name">这句话其实就相当于

2.v-html

利用v-html添加html元素

<p v-html="a"></p>//写在html文件中

a:"<h1>hello</h1>"//写在data中