3.5 属性绑定

一、v-bind 指令用法


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			
			<a v-bind:href="url">百度一下a>
			
			<a :href="url">百度一下2a>
			<button v-on:click="handle">切换地址button>
		div>
	body>
	<script type="text/javascript" src="../js/vue.js">script>
	<script type="text/javascript" >
	
	/*
		属性绑定
		v-bind 指令用法
		百度一下
		缩写形式
		百度一下
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 url: 'http://www.baidu.com',
			},
			methods: {
				handle: function () {
					//修改url地址
					this.url = 'http://www.hao123.com';
				}
			}
		});
	script>
html>

二、v-model 模型变化(指令的本质)

v-model 模型变化(指令的本质)
       1.
       2.
       3.


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			<div> {{msg}}div>
			<input type="text" v-bind:value="msg" v-on:input="handle"/>
			<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value"/>
			<input type="text" v-model="msg" />
		div>
	body>
	<script type="text/javascript" src="../js/vue.js">script>
	<script type="text/javascript" >
	
	/*
		属性绑定
		v-model 模型变化(指令的本质)
		1.<input type="text" v-bind:value="msg" v-on:input="handle"/>
		2.<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value"/>
		3.<input type="text" v-model="msg" />
 
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			methods: {
				handle: function (event) {
					//使用输入域中最新的数据覆盖原来的数据
					this.msg = event.target.value;
				}
			}
		});
	script>
html>

相关阅读:
npm、yarn到pnpm的发展历程
网络数据请求
浙江大学机器学习（胡浩基）课程学习笔记一：概述与支持向量机
接口自动化测试实战之接口框架修改与动态参数化与数据伪造
PS的抠图算法原理剖析 1
解决了一个困扰了我2天的问题
2022“杭电杯”中国大学生算法设计超级联赛（4）
什么是网关？网关有什么作用？
报错：Could not resolve host: mirrorlist.centos.org；Unknown error
张量-规约计算

原文地址：https://blog.csdn.net/PengK_aha/article/details/128063049