当前位置：首页 > news >正文

外贸网站建设制作站长素材免费下载

news 2026/4/8 2:04:50

外贸网站建设制作,站长素材免费下载,重庆市工程建设招投标交易中心网站,企业策划公关公司响应式： 数据变化，视图自动更新接下来使用一个例子来体现一下什么是响应式案例一： 访问数据，视图自动更新 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><…

响应式：数据变化，视图自动更新

接下来使用一个例子来体现一下什么是响应式

案例一：

访问数据，视图自动更新

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--准备容器  -->
<div id="app"></div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>var  app=new Vue({el:'#app',data:{str1:'hello',str2:'你好'}});
</script>
</body>
</html>

ctrl + shift +j 打开控制台模拟一下响应式变化

访问谁就会产生相应的变化

案例二：

修改数据，视图自动更新

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--准备容器  -->
<div id="app">
{{msg}}</div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>var  app=new Vue({el:'#app',data:{msg:'你好'}});
</script>
</body>
</html>

修改前