vue属性、监听、事件、绑定、渲染（二）
2022/8/29 6:24:05
本文主要是介绍vue属性、监听、事件、绑定、渲染（二），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
一、计算属性和监听器
1、计算属性
data中的属性可以通过声明获得，也可以通过在computed通过计算获得
特性：
计算属性所依赖的属性值发生变化会影响计算属性的值同时发生变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<input type="text" v-model="str1"/> <br>
<input type="text" v-model="str2"/> <br>
{{str3}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
str1:'你好',
str2:'玛卡巴卡',
},
computed:{
str3:function(){
return this.str1+this.str2;
}
}
})
</script>
</html>
2、侦听器
侦听器：
就是data中属性的监听器，当data中的属性值发生变化就会触发侦听器函数的执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<input type="text" v-model="str1"/> <br>
<input type="text" v-model="str2"/> <br>
{{str3}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
str1:'杭州',
str2:'西湖',
str3:'杭州西湖'
},
watch:{
str1:function(){
this.str3=this.str1+this.str2
}
}
})
</script>
</html>
二、Class和Style绑定
vue可以通过mustache语法将vue中data的数据绑定到html标签中。
标签中属性怎么绑定？ 如下:
1、class内部样式绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container div {
margin: 20px;
}
.box1 {
width: 100px;
height: 100px;
background-color: green;
}
.my-box {
border-radius: 10px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<!-- 一、{样式名：data中boolean类型变量} -->
<div :class="{box1:falg}"></div>
<div :class="{box1:falg,'my-box':falg}"></div>
<!-- 二、三元表达式判断 -->
<div :class="falg1?'box1':'box2'"></div>
<div :class="falg1?box1:box2"></div>
<!-- 三、class中有多个样式时适应[]属性之间使用，隔开 -->
<div :class="[box1,'my-box']"></div>
</div>
</body>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#container",
data: {
falg: true,
falg1: false,
box1: 'box1',
box2: 'box2',
},
})
</script>
</html>
2、内联Style样式绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<!-- 第一种：
内联样式属性使用{}，
属性间使用，隔开
属性值不适用原来的css属性 font-size
而是使用json格式
-->
<div id="container" :style="{color:colorName,fontSize:size+'px'}">
hello
</div>
<!--
第二种：
data中直接给定样式的字符串
-->
<div :style="myStyle1"></div>
<!--
第三种：
data中直接给定样式的对象格式.
对象格式的话属性键值对的
键为json格式
-->
<div :style="myStyle2"></div>
</div>
</body>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#container",
data: {
colorName:"red",
size:30,
myStyle1:"background-color:green;width:100px;height:100px;",
myStyle2:{
backgroundColor:"red",
width:"100px",
height:"100px",
borderRadius:'10px'
}
},
})
</script>
</html>
三、条件与列表渲染
1、条件渲染
1.1、v-if、v-else-if、v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<div>
<input type="text" v-model="code" placeholder="输入1,2或其他输出相应结果"/>
</div>
<div v-if="code==1">
你好
</div>
<div v-else-if="code==2">
Hello
</div>
<div v-else>
嗨
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:"#container",
data:{
code:1
}
})
</script>
</html>
1.2、v-show
从功能上将v-show和v-if作⽤是相同的，渲染过程有区别。 v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和⼦组件适当地被销毁 和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第⼀次变为真时，才会开始 渲染条件块。 相⽐之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS 进⾏切换。 ⼀般来说， v-if 有更⾼的切换开销，⽽ v-show 有更⾼的初始渲染开销。因此，如果需要⾮常频繁 地切换，则使⽤ v-show 较好；如果在运⾏时条件很少改变，则使⽤ v-if 较好。
2、列表渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css>"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="container">
<ul v-for="t,index in type">
<li>
<a :href="'query?id='+t.t_id">{{t.t_name}}</a>
</li>
</ul>
<hr>
<!-- 表格 -->
<table class="table table-bordered">
<tr>
<th>学号</th>
<th>姓名</th>
<th>头像</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="s,index in stus" :id="'str'+index">
<td>{{s.stuNum}}</td>
<td>{{s.stuName}}</td>
<td>
<img :src="s.stuImg" width="100px" height="100px">
</td>
<td>
{{s.stuAge}}
</td>
<td>
<img v-if="s.stuSex=='M'" src="img/M.png" width="100px" height="100px">
<img v-else src="img/F.png" width="100px" height="100px">
</td>
<td>
<a :href="'del?id='+s.stuNum" class="btn btn-danger">删除</a>
<a :href="'edit?id='+index" class="btn btn-success">编辑</a>
</td>
</tr>
</table>
</div>
</body>
<script src="./js/vue.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="<https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js>"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
</script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js>"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
</script>
<script>
var vm = new Vue({
el: "#container",
data: {
type: [{
t_id: 1,
t_name: '小米'
},
{
t_id: 2,
t_name: '华为'
},
{
t_id: 3,
t_name: 'oppo'
},
{
t_id: 4,
t_name: 'VIVO'
}
],
stus: [{
stuNum: '1001',
stuName: 'one',
stuImg: 'img/01.jpg',
stuAge: 20,
stuSex: 'M'
},
{
stuNum: '1002',
stuName: 'two',
stuImg: 'img/02.jpg',
stuAge: 22,
stuSex: 'F'
},
{
stuNum: '1003',
stuName: 'three',
stuImg: 'img/03.jpg',
stuAge: 21,
stuSex: 'M'
}
]
}
})
</script>
</html>
四、事件处理
v-on绑定事件可简写为@
1、事件的绑定【v-on 或 @】
1.1、通过参数传递绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css>"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="container">
<!-- 表格 -->
<table class="table table-bordered">
<tr>
<th>学号</th>
<th>姓名</th>
<th>头像</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="s,index in stus" :id="'str'+index">
<td>{{s.stuNum}}</td>
<td>{{s.stuName}}</td>
<td>
<img :src="s.stuImg" width="100px" height="100px">
</td>
<td>
{{s.stuAge}}
</td>
<td>
<img v-if="s.stuSex=='M'" src="img/M.png" width="100px" height="100px">
<img v-else src="img/F.png" width="100px" height="100px">
</td>
<td>
<!-- <a :href="'del?id='+s.stuNum" class="btn btn-danger">删除</a>
<a :href="'edit?id='+index" class="btn btn-success">编辑</a> -->
<button type="button" class="btn btn-danger" v-on:click="del(s.stuNum)">删除</button>
<button type="button" class="btn btn-success">修改</button>
</td>
</tr>
</table>
</div>
</body>
<script src="./js/vue.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="<https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js>"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
</script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js>"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
</script>
<script>
var vm = new Vue({
el: "#container",
data: {
stus: [{
stuNum: '1001',
stuName: 'one',
stuImg: 'img/01.jpg',
stuAge: 20,
stuSex: 'M'
},
{
stuNum: '1002',
stuName: 'two',
stuImg: 'img/02.jpg',
stuAge: 22,
stuSex: 'F'
},
{
stuNum: '1003',
stuName: 'three',
stuImg: 'img/03.jpg',
stuAge: 21,
stuSex: 'M'
}
]
},
methods:{
del:function(num){
console.log(num)
}
}
})
</script>
</html>
1.2、使用dataset对象传值
<button type="button" class="btn btn-success" @click="upload" :data-num="s.stuNum">修改</button> 在标签中绑定以data-开头的属性 例： :data-num = "s.stuNum"
1.3、混合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css>"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="container">
<!-- 表格 -->
<table class="table table-bordered">
<tr>
<th>学号</th>
<th>姓名</th>
<th>头像</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="s,index in stus" :id="'str'+index">
<td>{{s.stuNum}}</td>
<td>{{s.stuName}}</td>
<td>
<img :src="s.stuImg" width="100px" height="100px">
</td>
<td>
{{s.stuAge}}
</td>
<td>
<img v-if="s.stuSex=='M'" src="img/M.png" width="100px" height="100px">
<img v-else src="img/F.png" width="100px" height="100px">
</td>
<td>
<!-- <a :href="'del?id='+s.stuNum" class="btn btn-danger">删除</a>
<a :href="'edit?id='+index" class="btn btn-success">编辑</a> -->
<button type="button" class="btn btn-danger" v-on:click="del(s.stuNum,$event)">删除</button>
<button type="button" class="btn btn-success" @click="upload" :data-num="s.stuNum">修改</button>
</td>
</tr>
</table>
</div>
</body>
<script src="./js/vue.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="<https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js>"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
</script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js>"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
</script>
<script>
var vm = new Vue({
el: "#container",
data: {
stus: [{
stuNum: '1001',
stuName: 'one',
stuImg: 'img/01.jpg',
stuAge: 20,
stuSex: 'M'
},
{
stuNum: '1002',
stuName: 'two',
stuImg: 'img/02.jpg',
stuAge: 22,
stuSex: 'F'
},
{
stuNum: '1003',
stuName: 'three',
stuImg: 'img/03.jpg',
stuAge: 21,
stuSex: 'M'
}
]
},
methods:{
del:function(num,e){
console.log(num)
console.log(e)
},
upload:function(event){
/*
1、绑定的js函数不传值，调用的时候可以通过event参数(事件队形 名字可自取)
2、event表示当前的事件对象
3、event.srcElement表示发生事件的元素
4、event.srcElement.dataSet 获取自定义的以data-开头的绑定参数(data-属性)
*/
console.log(event.srcElement.dataset)
var s = event.srcElement.dataset;
console.log(s.num)
}
}
})
</script>
</html>
注意：
混合使用，获取event事件
传入的参数需要添加$event特殊变量
然后通过
event.srcElement.dataSet获取自定义绑定的data-。。属性名
2、事件修饰符
在使用v-on进行事件绑定的时候，可以添加特定后缀，设置事件触发的特性 语法 ： @事件.后缀名
2.1、示例
<button type="submit" @click.prevent="test"></button>
2.2、后缀
- .prevent 禁用事件
- .stop 阻止冒泡
- .slef 只有自身可以触发，子标签不能冒泡触发
- .once 点击事件只触发一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css>"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="container">
<div>
测试
<ol>
<li> .prevent 【提交表单不在重载页面】</li>
<li> .stop 【阻止冒泡】</li>
<li> .self 【自己调用子标签的事件不触发】</li>
<li> .once 只会触发一次</li>
</ol>
</div>
<form action="<http://www.baidu.com>" @submit.prevent>
<button type="submit">提交</button>
</form>
<hr>
<div style="width: 200px;height: 200px;background-color: red;" @click.self="box1">
<div style="width: 100px;height: 100px;background-color: green;" @click="box2">
<button type="button" class="btn btn-danger" @click.stop="box3">测试</button>
</div>
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="<https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js>"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
</script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js>"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
</script>
<script>
var vm = new Vue({
el: "#container",
data: {
},
methods: {
box1: function() {
alert(1);
},
box2: function() {
alert(2);
},
box3: function() {
alert(3);
}
}
})
</script>
</html>
3、按键修饰符
针对键盘的按键。限定指定按键触发 @keyup 按下松开触发 @keyup.enter 回车 常用按键别名如下： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
除了以上提供的还可以根据键盘码自定义按键别名
键盘码
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container"> 吧
<input type="text" @keyup.j="test">测试按键事件</button>
</div>
</body>
<script src="./js/vue.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
</script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
</script>
<script>
//根据键盘码设置按键的别名
Vue.config.keyCodes.j = 74;
var vm = new Vue({
el: "#container",
data: {
},
methods: {
box1: function() {
alert(1);
},
box2: function() {
alert(2);
},
box3: function() {
alert(3);
},
test:function(){
alert("按键j的事件被触发")
}
}
})
</script>
</html>
系统修饰符：
- .ctrl
- .alt
- .shift
- .meta 【win键】
- 组合键：键盘事件.系统修饰符.键
- 例：@keyup.ctrl.j Vue.config.keyCodes.j = 74
这篇关于vue属性、监听、事件、绑定、渲染（二）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-29如何在 Vue2 的 uni-app 项目中使用 npm ？-icode9专业技术文章分享
- 2024-12-29uni-app vue2微信小程序项目在哪里打开终端并使用npm？-icode9专业技术文章分享
- 2024-12-29怎么在 uni-app Vue2 项目中全局引入 Vant Weapp？-icode9专业技术文章分享
- 2024-12-29uni-app vue2微信小程序项目如何在main.js中全局引入vant？-icode9专业技术文章分享
- 2024-12-28Vue入门教程：从零开始搭建第一个Vue项目
- 2024-12-28Vue CLI入门指南：快速搭建Vue项目
- 2024-12-28Vue3基础知识入门教程
- 2024-12-28Vue3公共组件开发与使用入门教程
- 2024-12-28Vue CLI学习：新手入门教程
- 2024-12-28Vue CLI学习：轻松入门与实践指南
