学习周记 vue初步
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">Sorrydiv><div v-else>Not sorrydiv>
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">Adiv><div v-else-if="number > 0.25">Bdiv><div v-else-if="number < 0.25">Cdiv><div v-else>Not A/B/Cdiv>
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>yansetitle><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>效果展示：
点击后：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！