1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"> </script>
</head>
<body>
<div id="app">
<!--1.1 文本 -->
<p>{{ message }}</p>
<span v-once>这个将不会改变: {{ msg }}</span>
<p>Using mustaches: {{ rawHtml }}</p>
<!--1.2 原始html -->
<!-- 改变字符串内容为html标签 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<!--1.3 特性 -->
<!-- 声明.css属性class,赋值为变量color -->
<div v-bind:class="color">test...</div>
<!--1.4 javascript表达式 -->
<p>{{number+1}}</p>
<!-- 字符串的分割&翻转&拼接 -->
<p>{{message2.split('').reverse()}}</p>
<p>{{message2.split('').reverse().join('')}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
message: 'hello Vue',
msg:'hi vue',
rawHtml:'<span style="color:red">this is red</span>',
//yellow 为变量color的值,标识不同class
color:'yellow',
number:11,
message2:'hello world'
}
})
vm.msg='no change';
</script>
<style type="text/css">
.red{color:red}
.yellow{color:yellow;font-size: 100px;};
</style>
</body>
</html>
|
