vue初步
VUE起步和模板语法
Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下:
var vm = new Vue({
// 选项
})
Vue.js 条件语句
v-if ; v-else
随机生成一个数字,判断是否大于0.5,然后输出对应信息
<body>
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>
v-else-if
生成随机数并显示,以及判断结果。
<body>
<script language=javascript>
var number = Math.random();
document.write(number);
</script>
<div id="app">
<div v-if="number > 0.75">
A
</div>
<div v-else-if="number > 0.25">
B
</div>
<div v-else-if="number < 0.25">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>
效果展示:
Vue.js 样式绑定
class 属性绑定;数组语法;Vue.js style(内联样式);
一些语句:
<div v-bind:class="{ 'active': isActive }"></div>
<div class="static"
v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }">
</div>
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>
小实验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>yanse</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active{
width:100px;
height:100px;
background:green;
}
.active2{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ active: isActive,active2:!isActive}"></div>
<br>
<button v-on:click="isActive=!isActive">点击我</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive:true
}
})
</script>
</body>
</html>
效果展示:
点击后: