v-model
v-model.lazy 失去焦点后显示
v-model.number 在文本框中输入txt 可转为可运算的数字
v-if v-else-if v-else 加入同条件 显示不同的结果
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app">
<p v-if = "a==0">天气不错</p>
<p v-else-if = "a==1">你好</p>
<p v-else>逆天</p>
</div>
<script>
const app={
data(){
return{
a:2
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
v-if 真改变html结构
v-show 只改变样式 用于经常出现元素显示/隐藏变换的状态切换
v-for
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app">
<!--普通循环的遍历 n 表示在arr中遍历的数据 -->
<p v-for="n in arr">{{n}}</p>
<!--复杂数据的遍历 n 表示在arr中遍历的数据 -->
<!--直接访问对象 -->
{{stu}}
<!-- 访问单个属性 -->
{{stu.age}}
<!--循环访问 获取每一个变量的所有属性值 -->
<p v-for="s in stu">{{s}}</p>
<!--带索引 index索引数 key是属性值 value是属性值-->
<p v-for="value,key,index in stu">
{{index}},{{key}},{{value}}
</p>
<!--在school中遍历 显示所有的信息-->
<p v-for="s in school">{{s}}</p>
<!--在school中遍历 访问某些属性-->
<p v-for="s in school">{{s.sname}}:{{s.scope}}</p>
<!--在school中遍历 k是索引 stu是变量-->
<p v-for="stu,k in school">{{k}},{{stu.sname}}:{{stu.scope}}</p>
</div>
<script>
const app={
data(){
return{
arr:[1,2,3,4],
stu:{sname:'张三',age:20,scope:100},
school:[
{sname:'张三',age:20,scope:100},
{sname:'张si',age:20,scope:220},
{sname:'张wu',age:20,scope:300},
{sname:'张liu',age:20,scope:400},
]
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
VUE语法进阶
计算属性:对属性进行计算。
比如购物车中的物品加一个数量,待付款也跟着变化。
方法:看清楚methods total()写在哪里,在哪里调用。
计算属性:还有computed中的pay实现一样的效果。
区别:计算属性基与缓存的原理运行,本次计算的结果依赖于上次计算的结果。
而方法每次调用都要重新调用方法。
所以更推荐使用计算属性,更快。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app">
数量:<input type = "text" v-model = "num"/>
<hr/>
<!-- -->
<!-- 要写方法 methods {{total}}中调用-->
待付款:{{total()}}
<!-- 要写方法 computed {{pay}}中调用-->
待付款:{{pay}}
</div>
<script>
const app={
data(){
return{
price:100,
num:1,
}
},
computed:{
pay(){
return this.price * this.num
}
},
methods:{
total(){
return this.price * this.num
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
监听器
上一个例子,如果数量输入为-10,岂不是会亏本。
监听器就是要监听输入的数值,让它是一个正常值。
控制num(数量)值为1-5之间。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app">
数量:<input type = "text" v-model = "num"/>
<hr/>
<!-- -->
<!-- 要写方法 computed {{pay}}中调用-->
待付款:{{pay}}
</div>
<script>
const app={
data(){
return{
price:100,
num:1,
}
},
<!-- 所有的vue的计算属性放在这里-->
computed:{
pay(){
return this.price * this.num
}
},
<!-- 所有的vue的监听器放在这里-->
watch:{
<!-- 监视新值(第二个)和旧值(第一个)-->
num(newValue,oldValue){
console.log(newValue + ',' + oldValue)
<!--监听数量-->
if(newValue > 5 || newValue < 1){
this.num = oldValue;
}
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>