vue.js
Class 与 Style 绑定
据绑定一个常见需求是操作元素的 class 列表和它的内联样式用v-bind绑定
*绑定语法 有
对象语法
数组语法
计算属性语法
<style>
.ma{
height:100px;
width:100px;
border:2px solid red;
}
.maw{
color:chartreuse;
}
.ma1{
height:100px;
width:100px;
border:2px solid yellow;
}
.maw1{
color:red;
}
.ma2{
height:100px;
width:100px;
border:2px solid yellow;
}
.maw2{
color:red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="ms">yu</div>
<div v-bind:class="ms1">iug</div>
<div v-bind:class="[mc,mv]">few</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
ms:{
ma:true,
maw:true,
},
mc:'ma2',
mv:'maw2',//用数组的方法
},
computed:{
ms1:function(){
return {
ma1:true,
maw1:true,
}//用计算属性传值
}
}
})class绑定语法用在组件时这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖。
绑定内联样式
格式与css绑定相同参考以上格式
自动添加前缀
当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀==主要针对不同的阅览器==
条件渲染
- v-if v-else-if
- v-if v-else-if v-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div><template>元素可以配合v-if v-for语句使用
例如<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-if----- v-show 的区别
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
列表的渲染
*v-for的渲染 v-for 的优先级高于v-if
<body>
<div class="a1" >
<ul>
<li v-for="(item,key,index) in items" >{{index}}{{key}}{{item}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:'.a1',
data:{
om:true,
items:{
txt:'xiy',
txt1:'xi1y',
txt2:'xi2y',
txt3:'xiy1',
txt4:'xi1y2',
txt5:'xi2y3'
}
}
})
</script>
//输出结果为xiy ，xi1y xi2y xiy1 xi1y2 xi2y3数组的变异方法
包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
过滤和排序
<li v-for="n in evenNumbers">{{ n }}</li>
<script>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。