技术标签: 前端 vue.js javascript
结构:
主要分两个
1. 外层使用:export default
{} 导出组件对象
2. 里面可以使用setup()函数
setup()
函数可以返回一个对象,其中包含了组件中需要用到的响应式数据、方法等使用vbase- reactive ,可以快速生成代码
reactive() 可以定义响应式对象。(具体的细节先不追究了,反正能让上面模板用就行)
那模板中怎么使用
1. 插值表达式 { {}}
如:可以写 { { str.length }} { { str.split('').reverse().join('') }}
{ { num1 < num2 ? '是' : '否' }} 也可以数字表达式,为真展示 “是”
{ { !aaaa }} bool值取反
数组长度:{ { arr.length }} 数组中第一个元素:{ { arr[0] }}
对象中取值方式1:{ { obj.name }}
2. v-text 和 v-html 指令
如:<p v-text="str1"></p> 这样就可以把 str的内容放到 p标签中
如: <p v-html="str2"></p> str2内容如果是 html,就直接渲染出来了
3. v-bind
简写:模板中可以使用到 这些数据, 详细见后面
如: <a v-bind:href="url"> 简写 <a :href="url">
4. v-if
控制展示哪一部分
写法: v-if v-else-if v-else
5.v-show
变量用的bool值,控制是否展示
6. v-for
写法: vue3中好像必须要下面这么写,并且用 v-bind:key 说明 index 为 索引值
数组的写法: <li v-for="(item, index) in list" v-bind:key="index">{ { item }}-{ { index }}</li>
对象的写法:
<li v-for="(value, key, index) in person" v-bind:key="index"> { { value }}-{ { key }}-{ { index }} </li>
7 v-on :详细见 :有道云笔记 (youdao.com)
如: <button v-on:click="count += 1">按钮</button>
简写:<button @click="count += 1">按钮2</button>
后面接函数名: <button @click.once="addnum">按钮2</button>
函数需要传参时:@input="inputHandel('sq')
函数需要传事件参数时:@input="inputHande2('hello', $event)"
8.v-on 加修饰符
如:点once ,表示,仅一次 <button @click.once="addnum">按钮2</button>
点stop, 如果加上了,一次点击到一个重合的地方,就不会继续传递下去,见有道云笔记
9、v-model
可以用在文本框
单选框
多选框等
10. v-model 加修饰符
.lazy .trim .number
v-bind
<template>
<div>
<!--这个demo是讲 v-bind : 简写是 : -->
<!-- 补充:在css中,内联样式,又称行内样式,就是在HTML标签内部通过style属性来直接设置元素的CSS样式 -->
<h2>1.传统样式写法(有class、style两种表示法)</h2>
<div class="color-red f24">A.颜色红色、字体大小24</div>
<div style="color: red; font-size: 24px">B.颜色红色、字体大小24</div>
<h2>2.样式绑定写法</h2>
<div v-bind:class="classString">A.颜色红色、字体大小24</div>
<div :class="classArray">A.颜色红色、字体大小24</div>
<div :class="classObj">A.颜色红色、字体大小24</div>
<div :style="styleString">B.颜色红色、字体大小24</div>
<div :style="styleObj">B.颜色红色、字体大小24</div>
<div :style="styleArray">B.颜色红色、字体大小24</div>
<h2>3.其他属性的绑定</h2>
<a v-bind:href="url">百度一下</a>
<button v-bind:disabled="isDisabled">确定</button>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
setup() {
const state = reactive({
classString: 'color-red f24',
classArray: ['color-red', 'f24'],
classObj: { 'color-red': true, f24: true },
styleString: 'color: red; font-size: 24px',
styleObj: { color: 'red', 'font-size': '24px' },
styleArray: ['color:red', 'font-size:24px'],
url: 'http://www.baidu.com',
isDisabled: false
})
return {
...toRefs(state)
}
}
}
</script>
<style lang="scss" scoped>
.color-red {
color: red;
}
.f24 {
font-size: 24px;
}
</style>
文章浏览阅读1.5k次,点赞4次,收藏5次。macOS上如何在MATLAB中编译使用jpegtbx_1.4?预备:jpegtbx_1.4全称是JPEG Toolbox v1.4,是一个对JPEG图像进行处理的函数集合。这个工具箱可以借助MATLAB提取出JPEG图像的头信息、编码信息、DCT系数矩阵、量化表、哈夫曼表等JPEG元素,以供我们图像处理、信息隐藏来使用。这个工具箱基于IJG(i.e. Independent JPEG Gro..._% 需要包含有jpeg压缩的工具包jpegtbx_1.4
文章浏览阅读1k次。实验目的:1、了解数组的概念2、掌握定义、创建数组的方法3、掌握获取、输出数组元素的方法4、掌握遍历数组元素的方法5、掌握数组的合并、反转、排序数组元素实验环境:Windows10,phpstudy8.1,apache2.4,MySQL5.7。实验一:题目:定义一个数组,数组元素包括“星期一”、“星期二”、“星期三”、“星期四”、“星期五”、“星期六”、“星期日”。使用foreach语句,在网页上显示:实验源码:<!doctype html><html_php建立一个静态页面,可以输入5个同学的成绩,点击“计算”按钮之后,跳转到动态
文章浏览阅读4.4w次,点赞8次,收藏16次。年会程序员节目表演_程序员年会节目
文章浏览阅读8.7k次,点赞9次,收藏14次。dbeaver 深色主题安装教程官方GitHub安装教程1、Copy URL of extension update site: 2、In DBeaver main menu open Help -> Install New Software3、Paste update site URL into Work with field and press Enter4、Check items you wish to install (in most cases just all items) 5_dbeave install new software
文章浏览阅读3.8k次,点赞33次,收藏70次。接受平凡,努力出众,承认普通,但拒绝沉沦于平庸。大家好,我是你们的老朋友,小KK。存储系统基本概念存储器的层次结构_dram的地址线复用技术
文章浏览阅读1.2k次。VS过了30天试用,一直提示lincense过期。找到两个vs2015的license,亲测可用。Visual Studio Professional 2015简体中文版(专业版)KEY:HMGNV-WCYXV-X7G9W-YCX63-B98R2Visual Studio Enterprise 2015简体中文版(企业版)KEY:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV..._vs2015 license
文章浏览阅读1.8k次。教材:嵌入式系统及应用,罗蕾、李允、陈丽蓉等,电子工业出版社体系结构ARM 是典型的 RISC 体系,许多指令能够在单周期内执行高速缓存内核MPU – 内存保护单元控制内存访问权限控制内存区域的属性(cacheable, bufferable)MMU – 内存管理单元具有MPU的所有特性;提供虚拟地址到物理地址的转换Cache(高速缓存)快速的本地内存;存放最近被访问过的内存的副本TCM
文章浏览阅读3.2k次。Jenkins安装与部署_jenkins execute nodejs script
文章浏览阅读2.2w次。设置span的值$("#aa").text("新增用户信息"); 说明:#aa是span的id;text("这里是设置的值");注意:一定要双引号,获取span 的值var aa = $("#aa").html();获取并设置值var aa = $("#aa").html().innerHtml="新增用户信息";..._java document select 设置span文本值
文章浏览阅读3.1k次。1. performClick()方法的作用: performClick()方法 是使用代码主动去调用控件的点击事件(模拟人手去触摸控件) 2. 使用注意事项: 如果同时使用了view.setOnTouchListener()方法,则有可能存在拦截view.performClick()的响应事件, 因为当view.OnTouchEvent()在event.getActio..._android performclick
文章浏览阅读2k次。右击项目名|选择属性properties|在左边列表内选择“Java Build Path”|在右边选项卡用选择“source”|点开项目名前的“+”号,选择“Native library location”,“Edit”选择上面dll路径。(当然如果将dll拷贝到workspace下也可以用相对路径。也可右击“src”设定其properties内Native Library项。)..._system.loadlibrary 路径
文章浏览阅读729次。1 粗看STL程序=数据结构+算法数据结构:容器Containers算法:Algorithms容器和算法在C++标准库中给了定义,要看懂,要会用,要常用。2 C++11有助于使用的三个主题2.1 variadic templates,数量不定的模板参数语法:typename…,这三个点已经成为了语言的一部分。void print(){}template<typena..._侯捷的算法与数据结构