这个博客展示了如何在 Vue.js 中进行数据绑定，包括获取数据仓库、定义变量、显示数组和对象、进行简单的 JavaScript 运算，以及使用内置对象和方法。通过实例代码，解释了 Vue.js 模板语法的基础应用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1、获取数据仓库 -->
<p>{{name}}</p>
<p>{{age}}</p>
<p>{{user}}</p>
<p>{{arr}}</p>
<p>{{arr}}</p>
<!-- 2、直接定义值(字符串) -->
<p>{{'hello'}}</p>
<!-- 定义数组 -->
<p>{{['aaa','bbb','ccc']}}</p>
<!-- 对象(俩边需要空格) -->
<p>{{ {name:"alice",age:age} }}</p>
<!-- 3、简单的js运算 -->
<p>{{ age>8 ? "成年" : "未成年" }}</p>
<p>{{ age+1 }}</p>
<!-- 调用js的内置对象 -->
<p>{{ new Date() }}</p>
<p> {{ Math.random() }} </p>
<p>{{ Math.ceil(2.5) }}</p>
</div>
<script >
Vue.createApp({
data(){
return {
name:"tom",
age:18,
user:{
id:1001,
username:"admin",
password:"123"
},
arr:[1,2,3]
}
}
}).mount("#app")
</script>
</body>
</html>
628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
