一：条件渲染
v-if:节省资源 不满足不生成 满足生成
<div v-if="Areyouok">出现</div>
data(){
return{ Areyouok:true //显示 false 不显示
}}注意点:"" null underfined 都会被转化为false
v-if支持template元素
<template v-if="Areyouok"> <h1>Areyouok</h1> <p>Areyouok1</p> <p>Areyouok2</p></template>v-show :页面已经生成 满足条件显示 动态生成不用v-show 两种状态的切换用v-show
v-show不支持template元素
<div v-show="Areyouok">出现</div>
data(){
return{ Areyouok:true //显示 false 不显示
}}二：列表渲染
v-for
<div> <span v-for="n in 10">{{ n }} </span> </div>
// 结果为 1 2 3 4 5 6 7 8 9 10 在<template>上使用v-for (v-if也可以在<template>上进行使用)
循环数组：
<ul>
<template v-for="(item,index) in items" :key="index">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
data(){
return{
item:[ //数组
{msg:"成功"},
{mag:"失败"}
]
}
}循环对象
<ul>
<template v-for="(value,key,i) in info" :key="index">
<li>{{ value}}和{{key}}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
data(){
return{
info:{id:1,user:"fren"} //对象
}}
v-for与v-if一同使用 最好不要在同一元素上面进行使用
下面方法可使用 先v-if 后v-for
<ul v-if="todos.length">
<li v-for="(todo,index) in todos" :key="index"> //key最好使用id 必须设置key值
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>三：事件
方法在methods对象中进行定义
内联处理器中的方法 但是我似乎没有用过这样的写法.....
内联处理器指的是vue 模板template 自带的模板语法
这里的say(hi)就是：内联 JavaScript 语句。
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
methods:{
say(value){
alert(value)
}
}
结果： hi what有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
注意：这里的$event就是DOM原始的事件
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>// ...
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault() // preventDefault 阻止默认事件
alert(message)
}
}下次再来弄修饰符......
