组件化
<template> <script> <style>
页面 动态效果 样式
index.html main.js app.vue
new Vue({
el : '#app', //渲染内容的目的地
//渲染内容
render: function(c){ c只是个形参,叫什么都可以
return c(App);
}
})
<pre> 原样输出里面的内容
<v-text> <v-html> <v-model> <v-if> <v-show>
package.json webpack.config.js
<div v-show="isShow" style="height:100px;background-color:green;">
</div>
<div class="isRed? 'red':'green'">1111</div>
export default{
data(){
return{
isRed:true
}
}
}
.red{
background-color:red;
.green{
background-color:green;
}
class结合v-bind使用
需要根据可变的表达式的就结果来给class赋值,就需要遇到v-bind:class=”xxx”
v-bind:属性名=”表达式”
简化的写法: :属性名=”表达式”
class:结果的分类
一个样式:返回字符串,三元表达式和key和样式的对象清单
多个样式:返回对象(样式做key,true或false的值)
<div v-bind:class="isRed? 'red':'green'">1111</div>
<div v-bind:class="{'red':true,'big':true}"></div>
export default{
data(){
return {
isRed:false,
stus:[{name:'jack',score:'A'},{name:'rose',score:'B'}]
}
}
}
复杂情况:通过遍历,根据当前对象的成绩,匹配成绩和样式的清单对象,用成绩做key,取对象的value,最终返回字符串做样式名
<ul>
<li v-for="stu in stus" :class="{'A':'red','B':'green'}[stu.score]">
{{stu.name}}
</li>
</ul>