学习周记 vue初步

最新推荐文章于 2021-06-24 16:44:48 发布

「理想家」

最新推荐文章于 2021-06-24 16:44:48 发布

阅读量259

点赞数 5

本文链接：https://blog.csdn.net/Estheri/article/details/117307220

版权

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>