命令行方法
vue基本框架
<template>
<!-- 写html的 -->
<div class="hello">
</div>
</template>
<script>
// 写业务逻辑的
export default {
name: 'HelloWorld',
}
</script>>
动态修改文本
数据绑定最常见的形式就是使用
“Mustache” (
双大括号
)
语法的文本
插值
<template>
<!-- 写html的 -->
<div class="hello">
<h3>学习Vue:模版语法</h3>
<p>{{ mssage }}</p>
</div>
</template>
<script>
// 写业务逻辑的
export default {
name: 'HelloWorld',
data() {
return {
mssage:"学习vue"
}
}
}
</script>
原始html
双大括号会将数据解释为普通文本,而非
HTML
代码。为了输出真
正的
HTML
,你需要使用
v
-
html
指令
<div v-html="rawHtml"></div>
data() {
return {
mssage:"学习vue",
rawHtml:"<a href='https://www.itbaizhan.com'>百战</a>"
}
}
属性 Attribute
- 修改html属性,v-bind
- 可以简写成":"
<div v-bind:id="dynamicId"></div>
data(){
return{
dynamicId:1001
}
}
条件渲染
- v-if 这块内容只会在指令的表达式返回 true 值的时候被渲染。
- v-else if 不满足时运行
- v-show 和if类似,非常频繁地切换,则使用 v-show 较好
<div class="hello">
<p v-if="flag">我是孙猴子</p>
<p v-else>你是傻猴子</p>
<p v-show="flag">你真的是那只孙猴子么</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
flag:true,
}
}