-
html+CSS+js部分基础运用14
- 熟悉插值{{}}的用法，在页面中显示下列内容。
图1 插值语法的效果图
- 在页面中统计鼠标单机按钮的次数。【提示：v-on指令】，页面效果如下图所示：
图2 统计效果图
3、①单击按钮可以修改黑体字。②通过调试工具vue-devtools修改黑体字。
图3 修改名字和年龄效果图
- 文本框输入数据，下面能实时显示对应的欢迎信息。【指令v-model
- 1.调用vue熟悉插值{{}}的用法
<script type="text/javascript">
new Vue({
el:'#vue1',
data:{
myname:'xxx',
html1:'这些信息是使用b标记的显示效果！',
x:10,
yesNo:true
}
})
script>
- 2.
主要利用v-on函数和vue框架
<button v-on:click="updata">计数button>
<script>
new Vue({
el:'#app',
data:{
sum: 0
},
methods:{
updata:function(){
this.sum++;
}
}
})
script>
3.
通过vue-devtools调试和v-on实现
<button v-on:click="update">修改button>
4.
通过v-model实现
<form action="" align="center">
<fieldset>
<legend align="center">学生信息legend>
姓名：<input type="text" v-model:value="name" value="1"><br>
班级：<input type="text" v-model:value="class1" ><br>
专业：<input type="text" v-model:value="zy" ><br><br>
<input type="submit" value="提交"> <input type="reset" value="重置"><br><br>
<p><span>{{zy}}span>专业、<span>{{class1}}span>班级的<span>{{name}}span>同学，欢迎您！p>
fieldset>
form>
1.
2
3
4
JavaScript使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互的表达能力。从而基于CGI静态的HTML、页面将被可提供动态实时信息。
1.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
head>
<body>
<div id="vue1">
<p>1.文本插值：我的姓名是{{myname}}。p>
<p>2.使用v-html指令：<span v-html="html1">span>p>
<p>3.数值表达式绑定：5+5*3={{5+5*3}}p>
<p>4.函数表达式绑定：若x={{x}},则x<sup>2sup>+5={{Math.pow(x,2)+5}}p>
<p>5.条件表达式绑定：若yesNo值为{{yesNo}}，则我的选择是{{yesNo?'确定':'取消'}}。p>
<p>6.语句不会生效：var score = 95p>
div>
<script type="text/javascript">
new Vue({
el:'#vue1',
data:{
myname:'xxx',
html1:'这些信息是使用b标记的显示效果！',
x:10,
yesNo:true
}
})
script>
body>
html>
2.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
head>
<body>
<div id="app">
<button v-on:click="updata">计数button>
<p>按钮被单击<span>{{sum}}span>次p>
div>
<script>
new Vue({
el:'#app',
data:{
sum: 0
},
methods:{
updata:function(){
this.sum++;
}
}
})
script>
body>
html>
3.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
head>
<body>
<div id="app">
<p>大家好，我是<span>{{name}}span>p>
<p>今年<span>{{age}}span>岁。p>
<button v-on:click="update">修改button>
div>
<script>
new Vue({
el:'#app',
data:{
name:"王老师",
age:'30'
},
methods:{
update:function(){
this.name="李老师";
this.age="40";
}
}
})
script>
body>
html>
4.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
head>
<body>
<div id="app">
<form action="" align="center">
<fieldset>
<legend align="center">学生信息legend>
姓名：<input type="text" v-model:value="name" value="1"><br>
班级：<input type="text" v-model:value="class1" ><br>
专业：<input type="text" v-model:value="zy" ><br><br>
<input type="submit" value="提交"> <input type="reset" value="重置"><br><br>
<p><span>{{zy}}span>专业、<span>{{class1}}span>班级的<span>{{name}}span>同学，欢迎您！p>
fieldset>
form>
div>
<script >
new Vue({
el:'#app',
data:{
name:'',
class1:'',
zy:''
}
})
script>
body>
html>
-
相关阅读:
C语言练习百题之求100之内的素数
Xilinx Kintex7中端FPGA解码MIPI视频，基于MIPI CSI-2 RX Subsystem架构实现，提供工程源码和技术支持
网络安全（黑客）技术自学
Mybatis与Mybatis-Plus(注解与Xml)(单表与多表)
Excel 线性回归函数 LINEST
uboot启动流程涉及reset汇编函数
手机SSL证书失效了怎么解决？
nn.PairwiseDistance 和 torch.cdist 和 MSELoss 计算距离
【组成原理-存储】存储器的相关知识
EFDC模型教程
- 原文地址：https://blog.csdn.net/m0_55709044/article/details/139456929