1、v-text属性
实例中的数据content会完整显示
<div v-text="content"></div>
2、v-html属性
实例中的数据content，其中html标签会被转义
<div v-html="content"></div>
3、绑定函数及数据驱动
v-on: 函数绑定，可简写为@
函数中数据改变，页面会同步刷新，handleClick:function () {this.content= "world"}}
this相当于python中的self
content值改变后，页面内容会自动刷新
><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue学习</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-on:click="handleClick">{{content}}</div>
<div @click="handleClick">{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
content:"hello world"
},
methods:{
handleClick:function () {
this.content = "world"}
> }
})
</script>
</body>
</html>
网友评论