随笔分类 - Vue
摘要：<script> let arr = [10, 20, 30, 40, 50, 60]; // 要求找出小于40的元素*2再让这个数组的每个元素相加 // 链式写法： let newArr = arr.filter(function(n) { return n < 40; }).map(functi
阅读全文
摘要：<script> // 编程范式： 命令式编程 / 声明式编程 // 编程范式： 面向对象编程（第一公民：对象） / 函数式编程（第一公民：函数） // filter / map / reduce // filter中的回调函数有一个要求：必须返回一个布尔值 // true: 当返回true时 函数
阅读全文
摘要：<body> <div id="app"> <ul> <button @click="add">添加</button> <li v-for="i in list"> {{ i }} </li> </ul> </div> <script src='https://cdn.jsdelivr.net/np
阅读全文
摘要：<style> * { margin: 0; padding: 0; } #app { width: 800px; height: 500px; margin: 50px auto; border: 1px solid #000; text-align: center; } nav { font-w
阅读全文
摘要：<style> .changeList { color: red; } </style> <body> <div id="app"> <h1> {{ fullName }} </h1> <h2> {{ fullNameT }} </h2> <h2> {{ fullNameT }} </h2> <h2
阅读全文
摘要：<body> <div id="app"> <h1> {{ message + ' ' + add + ' ' + sub }} </h1> <!-- 这样写太繁琐了 不方便阅读 --> <h1> {{ getMessage() }} </h1> <!-- 方法1 调用方法 --> <h1> {{
阅读全文
摘要：<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: Scroll; overflow-y: hidden } li { list-style: none; } #mask { display: f
阅读全文
摘要：<style> * { margin: 0; padding: 0; } #mask { width: 700px; height: 300px; margin: 30px auto; text-align: center; } h1 { font-weight: 300; color: #1267
阅读全文
摘要：<body> <div id="mask"> <button @click="getJoke">获取笑话</button> <p> {{ joke }} </p> </div> <script src="http://unpkg.com/axios/dist/axios.min.js"></scri
阅读全文
摘要：<body> <button class="get">get请求</button><button class="post">post请求</button> <!-- 官网提供的 axios 在线地址 --> <script src="http://unpkg.com/axios/dist/axios
阅读全文
摘要：<style> * { margin: 0; padding: 0; box-sizing: border-box; } #mask { width: 300px; height: 400px; background-color: rgb(238, 238, 238); text-align: ce
阅读全文
摘要：<body> <div id="app"> <button @click="setM">我想说</button> <input type="text" v-model="message"> <h2> {{ message }} </h2> </div> <script src="https://cd
阅读全文
摘要：<body> <div id="app"> <select name="abc" v-model="fruit"> <option value="榴莲">榴莲</option> <option value="荔枝">荔枝</option> <option value="龙眼">龙眼</option>
阅读全文
摘要：<body> <div id="app"> <label for="agree"> <input type="checkbox" name="agree" id="agree" v-model="isAgree">同意协议： <button :disabled="!isAgree">下一步</but
阅读全文
摘要：<body> <div id="app"> <!-- v-model结合input:radio单选框使用 不写name属性 也可以实现单选 --> <label for="male"> 男:<input type="radio" id="male" value="男" v-model="sex">
阅读全文
摘要：<body> <div id="app"> <button @click="doIt(f1,f2)">点击</button> <input type="text" @keyup.enter="sayHi"> </div> <script src="https://cdn.jsdelivr.net/n
阅读全文
摘要：<body> <div id="app"> <ul> <li v-for="(i,index) in arr"> {{ (index+1) + " " + i }} </li> </ul> <ul> <!-- 遍历对象中 获取key value 格式(value,key) --> <li v-for
阅读全文
摘要：<style> * { margin: 0; padding: 0; } #mask { position: relative; width: 300px; height: 626px; background-color: #ccc; margin: 30px auto; } img { width
阅读全文
摘要：<style> img { width: 300px; } .active { border: 2px solid red; } </style> <body> <div id="app"> <img v-bind:src="imgsrc" alt=""> <img :src="imgsrc" :t
阅读全文
摘要：<body> <div id="app"> <!-- 方法1 --> <h2 :style="{backgroundColor:'pink',fontWeight:'400'}"> {{ message }} </h2> <!-- 方法2 --> <h2 :style="changeStyle()"
阅读全文
浙公网安备 33010602011771号