目录
前言
上次分享了Vue的入门,简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。
一、插值
1.1、文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{
{msg}}</h3>
</div>
</body>
<script>
// 绑定边界
new Vue({
el: '#app',
data() {
return {
msg: '我真的服了你个老六'
}
}
})
</script>
</html>
1.2、html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{
{msg}}</h3>
<p>html串</p>
<div v-html="htmlstr"></div>
</div>
</body>
<script>
// 绑定边界
new Vue({
el: '#app',
data() {
return {
msg: '我真的服了你个老六',
htmlstr: '<span style="color:red;">文本内容</span>'
}
}
})
</script>
</html>
1.3、属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{
{msg}}</h3>
<p>html串</p>
<div v-html="htmlstr"></div>
<p>vue 中的属性值</p>
<input type="text" v-bind:value="val" />
</div>
</body>
<script>
// 绑定边界
new Vue({
el: '#app',
data() {
return {
msg: '我真的服了你个老六',
htmlstr: '<span style="color:red;">文本内容</span>',
val: 'value值'
}
}
})
</script>
</html>
1.4、class、style绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{
{msg}}</h3>
<p>html串</p>
<div v-html="htmlstr"></div>
<p>vue 中的属性值</p>
<input type=