Vue - 1.0模板语法[v-bind 缩写 && v-on 缩写，数据的插入，原始 HTML，使用 JavaScript 表达式]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<style> body{padding: 40px;} em{ background: #c5b052; color: #fff; padding: 0 6px; margin: 0 6px; font-style: inherit;} button{ padding: 0 20px; height: 40px; line-height: 40px; background-color: #42b983; color: #fff; border: 0;}</style>
</head>
<body>
<div id="app">
<h2>v-bind 缩写 && v-on 缩写</h2>
<p v-html="Vbind_Von_HTML"></p>
<br>
<h1>数据的插入</h1>
<p>正常数据 <span style=" color:red;">{{ msg }}</span></p>
<p v-once>通过使用 <em>v-once</em> 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定： <span style=" color:red;">{{ msg }}</span></p>
<p><button @click="onceFun">v-once试一试</button></p>
<br>
<h1>原始 HTML</h1>
<p>不能解析html: <span style=" color:red;">{{ rawHtml }}</span></p>
<p>通过<em>v-html</em>来解析html: <span v-html="rawHtml"></span></p>
<br>
<h1>使用 JavaScript 表达式</h1>
<p>
数字自增 <span style=" color:red;">{{ number + 1 }}</span><br>
可以三目运算 ok ? 'YES' : 'NO' <span style=" color:red;">{{ ok ? 'YES' : 'NO' }}</span><br>
数组.split('').reverse().join('') <span style=" color:red;">{{ message.split('').reverse().join('') }}</span><br>
元素标签字符串拼接：v-bind:id="'list-' + id" <div v-bind:id="'list-' + id"></div>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app', //绑定的html元素
data: {
msg: 'hello world',
rawHtml: '<span style=" color:blue;">我是一段html内容</span>',
number: 0,
ok:true,
message: '数组split，数组reverse，数组join', //数组分割，取反，拼接
id: 0,
Vbind_Von_HTML:'// 完整语法 v-bind:href="url" <br>// 缩写 :href="url">...<br> // 完整语法 v-on:click="doSomething">...<br>// 缩写 @click="doSomething"'
},
methods: {
onceFun() {
this.msg = '看下v-once指令能不能修改我'
}
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号