Vue的赋值，指令，过滤，计算属性，监控属性

最新推荐文章于 2024-05-03 09:23:40 发布

Man - yee

最新推荐文章于 2024-05-03 09:23:40 发布

阅读量883

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue的赋值，指令，过滤，计算属性，监控属性

本文链接：https://blog.csdn.net/qq_44424498/article/details/102703989

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细探讨了Vue.js中的四种赋值方式，包括文本、HTML、属性和表达式。接着介绍了常用的Vue指令如v-if、v-else-if、v-else、v-for、v-on、v-bind、v-show和v-model的用法。此外，还提到了过滤器，区分了局部和全局过滤器，并举例说明。最后，讨论了计算属性和监控属性在响应式编程中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的赋值

vue有4种赋值方式

1.文本的方式

2.HTML的方式

3.属性的方式

4.表达式

<!--在样式中加
    <style>
			.class1{
				font-size: 12px;
				color: darkgreen
			}
		</style>
-->
<body>
		
		<div id="wenb">
			<h2>vue的四种赋值方式</h1>
			<h3>1.文本的方式</h2>
			{{name}}
			
			<h3>2.html的方式</h3>
			<div v-html="html"></div>
			
			<h3>3.属性的方式</h3>
			<!--这里的class1指向的是vue里面的class1，然后vue里面的class1再指向class名-->
			<!--v-bind指令：绑定一个属性，比如class，id等-->
			<div v-bind:class="class1">湖南岳阳</div>
			
			<!--可以使用JavaScript使用的方式-->
			<h3>4.表达式的方式</h3>
			{{number+1}}
			<input value="xxxx"  v-bind:class="'type_'+id"/>
		</div>
		
		
		<script>
			var vue1=new Vue({
				el:'#wenb',
				data:function(){
					return {
						name:'xxxx',
						html:'<input value="女" type="text"/>',
						class1:'class1',
						number:17,
						id:12
					}
				}
			})
		</script>
	</body>

Vue的指令

指令，指的是v-前缀的特殊属性

一步用的有v-if|v-else-if|v-else/v-for/v-on/v-bind/v-show/v-model

v-if|v-else-if：相当于if elseif else

v-for：相当于for循环

v-on：绑定事件

v-bind：绑定属性

v-show：显示

v-model：双向绑定数据

<body>
		
		<div id="div1">
			<h2>vue的指令</h2>
			<h3>v-if|v-else-if|v-else</h3>
                                <!--判断是男还是女-->
				<div v-if="sex==0">
					男
				</div>
				<div v-else-if="sex==1">
					女
				</div>
				<div v-else>
					不知
				</div>
			
				<h3>v-for</h3>
                                <!--循环遍历集合-->
				<div v-for="u in users">
					{{u.id}}----{{u.name}}
				</div>
				
				<h3>v-show</h3>
                                <!--如果选中就显示，不选中就隐藏-->
				<input type="checkbox" v-model="show"/>
				<div v-show="show">
					小行星小行星嘻嘻嘻嘻嘻嘻
				</div>
			
				<h3>实现复选框默认选中</h3>
				<div v-for="(u,i) in users">
					<!--@click绑定的事件中获取了复选框的值-->
					{{i+1}}<input type="checkbox" v-bind:value="u.id" v-model="sid" @click="dclick()"/>{{u.name}}
				</div>
		</div>
		
		
		
		<script>
			var vue=new Vue({
				el:'#div1',
				data:{
					sex:'0',
					users:[
						{id:1,name:'xx1'},
						{id:2,name:'xx2'},
						{id:3,name:'xx3'}
					],
					<!--默认选中-->
					sid:[1],
					show:'true'
				},
				methods:{
					dclick:function(){
						console.log(this.sid);
					}
				}
			})
		</script>
	</body>

Vue的过滤

相当于过滤器

有局部过滤器和全局过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<!--引入时间的js-->
		<script src="date.js"></script>
	</head>
	<body>
		<div id="div3">
			<h2>过滤相当于过滤器</h2>
			<h3>全局过滤器---在创建vue对象的上面定义</h3>
			<div>
				{{time}}<br/>
				{{time|formatDate}}
			</div>
			<h3>局部过滤器</h3>
			<div>
				{{card|cardNum}}
			</div>
		</div>
		
		<script> 
			<!--v是参数，可以随便命名-->
			Vue.filter('formatDate',function(v){
				return fmtDate(v,'yyyy-MM-dd');
			});
			var vue=new Vue({
				el:'#div3',
				data:{
					time:new Date(),
					card:'4306xxxxxxxxxxxxxx'
				},
				filters:{
					cardNum:function(v){
						return v.substr(0,6)+'XXXXXXXX'+v.substr(14,19);
					}
				}
			}) 
		</script>
	</body>
</html>

附date.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

Vue的计算属性和监控属性

<body>
		<div id="div_1">
			<h2>计算属性</h2>
			<div v-for="rs in result">
				{{rs.name}}<input v-bind:value="rs.shu" type="text"/>
			</div>
                        <!--计算所有科目的总和-->
			{{sum}}
			
			
			
			<h2>监听属性</h2>
			<div>
				<!--KM的改变，M也会改变-->
				KM:<input type="text" v-model="km"/></br>
				M:<input type="text" v-model="m"/>
			</div>
		</div>
		
		
		
		
		<script>
			var vue=new Vue({
				el:'#div_1',
				data:{
					result:[
						{name:'java',shu:100},
						{name:'C#',shu:100},
						{name:'python',shu:100},
						{name:'mysql',shu:100},
					],
					km:1,
					m:1000
				},
				computed:{
					sum:function(){
						let s=0;
						for(var i=0;i<this.result.length;i++){
							s+=this.result[i].shu;
						}
						return s;
					}
				},
				<!--监听-->
				watch:{
					km:function(v){
						this.m=parseInt(v)*1000;
					},
					m:function(v){
						this.km=parseInt(v)/1000;
					}
				}
			})
		</script>
	</body>