0
点赞
收藏
分享

微信扫一扫

vue06-三种数据绑定方式


<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8"/>
<title>三种模板语法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div>{{name}}</div>
<!-- 也是数据绑定的语法和{{}}一样 -->
<div v-text="name"></div>

<div v-html="name"></div>

<div>{{name + ' hot'}}</div>
<div v-text="name+' hot'"></div>
<div v-html="name+ ' hot'"></div>
</div>


<script>
//每个v-开头的,后面都可以去写js表达式,不仅仅是变量


var app = new Vue({
el:'#app', //vue实例处理哪个dom
data:{ //定义数据
name:'<h1>hello world</h1>'
}
})
</script>
</body>
</html>

1.{{name}}  插值表达式

2.v-text 与{{}}一样

3.v-html 会解析html标签

 

vue每个属性都可以写js表达式,不仅仅时变量

因此可以这么写:

<div>{{name + ' hot'}}</div>
<div v-text="name+' hot'"></div>
<div v-html="name+ ' hot'"></div>

运行效果:

vue06-三种数据绑定方式_vue数据绑定三种方法

 

 

举报

相关推荐

0 条评论