文件指令
<body>
<div id="app">
<!-- 1) 插值表达式 -->
<p>{{ msg }}</p>
<p>{{ 1 + 2 * 3 + '条' + msg }}</p>
<!-- 2) v-text -->
<p v-text="msg"></p>
<p v-text="'msg'"></p>
<!-- 3) v-html:能解析html代码语法 -->
<p v-text="html_msg"></p>
<p v-html="html_msg"></p>
<!-- 4) v-once:结合插值表达式来使用,变量值一旦被初始化赋值后就不会再改变 -->
<input type="text" v-model="val">
<p>{{ val }}</p>
<p v-text="val"></p>
<p v-html="val"></p>
<p v-once>{{ val }}</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '你是p',
html_msg: '<b>html语法代码是否解析</b>',
val: '000'
}
})
</script>
属性指令
# 1.v-bind:属性名="变量"
# 2.简写=> :属性名="变量"
# 3.:class="变量" | :class="{类名:is_able}" | :class="[类1变量, ..., 类n变量,]"
<head>
<meta charset="UTF-8">
<title>属性指令</title>
<style>
.cls_a {
200px;
height: 200px;
background-color: yellowgreen;
}
.cls_b {
text-align: center;
line-height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 属性指令:v-bind -->
<div id="app">
<!-- 1) 自定义属性绑定变量 -->
<p v-bind:abc="a"></p>
<!-- 2) title属性 -->
<p title="鼠标悬浮的文本提示">这是一个p段落</p>
<p v-bind:title="my_title">这是一个p段落</p>
<!-- 3) class属性 -->
<!-- 重点:v-bind: 可以简写为 : -->
<!-- my_class可以被任意赋值 -->
<p :class="my_class">这是一个p段落</p>
<!--{类名:类是否起作用, ...} 类是否起作用 写的是变量,变量的值为true或false-->
<!--应用场景:通过一个变量真假控制一个类名是否起作用-->
<p :class="{x:1, y:0, z:is_able}">这是一个p段落</p>
<!--[类名1, ..., 类名n]: 多类名,每一个类名既可以是字符串常量也可以是变量-->
<p :class="[o, p, q, 'oqp']">这是一个p段落</p>
<!--多类名综合使用-->
<p :class="[o, p, q, 'oqp', {k: true}, {h: false}]">这是一个p段落</p>
<!-- 4) style属性 -->
<p :style="my_style">这是一个p段落</p>
<p :style="{color: 'red', backgroundColor: yellow}">这是一个p段落</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
a: 'A',
my_title: '鼠标悬浮的文本提示',
my_class: 'cls_a cls_b',
is_able: true,
o: 'O',
p: 'P',
q: 'Q',
my_style: {
color: 'red',
// 'font-size': '30px'
fontSize: '30px'
},
yellow: 'greenyellow'
}
})