<template>
<div id="app">
<div>
<h3>模板语法</h3>
<p>{{ msg }}</p>
<div v-html="price"></div>
<div :class="active">hello</div>
<p>{{ count + 1 }}</p>
</div>
</div>
</template>
<div>
<h3>条件渲染</h3>
<p v-if="flags">可口可乐</p>
<p v-else>百事可乐</p>
<template v-if="flags">
<p>001</p>
<p>002</p>
<p>003</p>
</template>
<div v-show="flags">hello show!!!</div>
</div>
<div>
<h3>列表渲染</h3>
<ul>
<li v-for="(item, index) in result": key="item.id">{{ item.text }}- {{ index }}</li>
</ul>
</div>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return{
msg:"这是一个模板语法",
price:"<h3>hello!!!</h3>",
active:'active',
count:0,
flags:true,
result:[
{
id:1001,
text:"可口可乐"
},
{
id:1002,
text:"雪碧"
},
{
id:1003,
text:"果粒橙"
}
]
}
},
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
老师,为什么我的这个条件渲染渲染不出来