<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据绑定语法</title>
</head>
<body>
<!--1.插值-->
<!--文本插值-->
<h3 id="example1">{{ message }}</h3>
<!--文本单次插值（当数据改变时，插值处的内容不会继续更新）-->
<h3 id="example2" v-once>{{ message }}</h3>
<!--原始的 HTML 插值-->
<div id="example3" v-html="htmlValue"></div>
<!--2.JavaScript 表达式-->
<div id="example4">
<p>{{ number + 1 }}</p>
<p>{{ ok ? ‘YES‘ : ‘NO‘ }}</p>
<p>{{ message.split(‘‘).reverse().join(‘‘) }}</p>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script>
// example 1
let vm1 = new Vue({
el: ‘#example1‘,
data: {
message: ‘Hello Vue.‘
}
});
// example 2
let vm2 = new Vue({
el: ‘#example2‘,
data: {
message: ‘Hello Vue.‘
}
});
// 改变`message`, 发现不能改变
vm2.message = ‘Hello Vue World.‘;
// example 3
let vm3 = new Vue({
el: ‘#example3‘,
data: {
htmlValue: ‘<h2>Hello Vue.</h2>‘
}
});
// example 4
let vm4 = new Vue({
el: ‘#example4‘,
data: {
number: 5,
ok: true,
message: ‘Hello Vue.‘
}
});
</script>
</body>
</html>
结果：
原文地址：https://www.cnblogs.com/Jimc/p/10101173.html
时间： 2024-07-31 16:45:57