我要评论5.v-if及v-else-if指令
v-if 是一个指令，所以必须将它添加到一个元素上，通俗说就是它必须要有父元素
如果想切换多个元素可以这样写
<!--如果想切换多个元素,此时可以把一个 <template> 元素当做不可见的包裹元素，
并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。-->
<template v-if='ok'>
<h1>我们不一样</h1>
<p>哈哈哈哈</p>
</template>
下面是一个v-if的小栗子
<p id="app">
<button v-on:click="error = !error">Error</button>
<button v-on:click="success = !success">Success</button>
<p v-if="error">网络连接错误</p>
<p v-if="success">网络连接成功</p>
</p>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
error:false,
success:false
},
methods:{}
})
</script>
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用
<p v-if="type === 'A'">
A
</p>
<p v-else-if="type === 'B'">
B
</p>
<p v-else>
Not A/B/C
</p>
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后
6.V-for
我们用 v-for 指令根据一组数组的选项列表进行渲染。
v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
<p id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</p>
<script src="vue.js"></script>
<script>
new Vue({
el : "#app",
data :{
todos :[{text:'vue'},
{text:'vue.js'},
{text:'vue学习'}]
} // 1. vue
}) // 2.vue.js
</script> // 3.vue学习
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
<p id="app">
<ul id="example">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
</p>
<script src="vue.js"></script>
<script>
var example = new Vue({
el:'#example',
data:{
parentMessage:'哈哈哈',
items:[ {message:'你好美'},
{message:'你最美'}]
}
}) // .哈哈哈 - 0 - 你好美
// .哈哈哈 - 1 - 你最美
</script>
7.初始组件的应用
组件这个东西个人觉得不好学……但是它很好用，我们先来说说组件是干嘛的
组件 (Component) 是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。
要注册一个全局组件，可以使用 Vue.component(tagName, options)
组件在注册之后，便可以作为自定义元素 <my-component></my-component>
注册局部组件，仅在其作用域中可用的组件：
var Child = {
template: '<p>A custom component!</p>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父组件模板中可用
'my-component': Child
}
})
我们先来看一个简单的组件应用栗子
<p id="app1">
<greeting></greeting>
</p>
<script src="vue.js"></script>
<script>
Vue.component("greeting",{
template:` //` `这是用到了es6里面的知识让其进行换行
<p> {{ name }}:初始组件
<button v-on:click="changeName">改名</button>
</p>`,
data:function(){
return{
name:"大佬"
}
},
methods:{
changeName:function(){
this.name = "Herry"
}
}
})
new Vue({
el:'#app1',
})
</script>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论