1.v-if条件渲染
<div v-if="flags">ok</div>
<div v-else>no</div>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App',
biaoqian: "<h1>我是H1标签</h1>",
url_name: "百度",
url: "https://www.baidu.com",
disClass: "disactive",
dis2Class: "item",
flags: false
}
}
}
</script>
2.v-show
<div v-show="showFun">show</div>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App',
biaoqian: "<h1>我是H1标签</h1>",
url_name: "百度",
url: "https://www.baidu.com",
disClass: "disactive",
dis2Class: "item",
flags: false,
showFun:false
}
}
}
</script>
3.列表渲染v-for
<div v-for="person in persons">{{person}}</div>
<ul><li v-for="item in personz">{{item.name}}--{{item.age}}</li></ul>
<ul><li v-for="(item,key,index) in personz" :key="index">{{index}}-{{item.name}}--{{item.age}}--{{key}}</li></ul>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App',
biaoqian: "<h1>我是H1标签</h1>",
url_name: "百度",
url: "https://www.baidu.com",
disClass: "disactive",
dis2Class: "item",
flags: false,
showFun:false,
persons:[
"小明明",
"小医仙",
"小菲菲"
],
personz:[
{"name":"小明明","age":20},
{"name":"小明明","age":10},
{"name":"小明明","age":100}
]
}
}
}
</script>
4.事件处理（事件改变datas数据，data数据的变化引起视图的变化）
事件传递参数$event
<button class="" type="button" @click="clickHandler('hahha',$event)">按钮</button>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App',
biaoqian: "<h1>我是H1标签</h1>",
url_name: "百度",
url: "https://www.baidu.com",
disClass: "disactive",
dis2Class: "item",
flags: false,
showFun: false,
persons: [
"小明明",
"小医仙",
"小菲菲"
]
}
},
methods: {
clickHandler(data,$event) {
console.log(data)
console.log($event)
this.flags =!this.flags
/* if(this.flags==true){
this.flags=false
} */
}
}
}
</script>
5.数组 的更新检测
变异方法
改变原数组，则可以引起视图的更新（push;unshift）
不改变原数组，创建新数组，则无法引起视图的更新（concat，slice,filter）
<ul class="list"><li v-for="item in fruits">{{item}}</li></ul>
<button @click="newadds($event)">addto</button>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App',
biaoqian: "<h1>我是H1标签</h1>",
url_name: "百度",
url: "https://www.baidu.com",
disClass: "disactive",
dis2Class: "item",
flags: false,
showFun: false,
persons: [
"小明明",
"小医仙",
"小菲菲"
],
fruits:[
"bananas",
"apple",
"pears"
]
}
},
methods: {
clickHandler(data,$event) {
console.log(data)
console.log($event)
this.flags =!this.flags
/* if(this.flags==true){
this.flags=false
} */
},
newadds(){
// this.fruits.push("applebig");
//this.fruits.unshift("applesmall");
this.fruits.concat("applesmall");
console.log(this.fruits.concat("applesmall"))
}
}
}
</script>