阿狗工具
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
2024-04-09 16:15:23 阅读数 4028
v-text
- 设置标签的文本值(textContent)
- 默认写法会替换全部内容,使用差值表达式{{}}可替换指定内容
-
支持内部写表达式
image.png
<div id="app">
<h2 v-text="message"></h2>
<h2 v-text="info"></h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:"#app",
data:{
message: '11111',
info:'lalala'
}
})
</script>
image.png
v-html
- 设置innerHTML
- 内容中有html结构会被解析为标签
-
v-text指令无论内容是什么,只会解析为文本
image.png
<div id="app">
<h2 v-html="content"></h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:"#app",
data:{
// content:'programmer'
content:'<a href="http://www.bilibili.com">programmer</a>'
}
})
</script>
v-on
- 为元素绑定事件
- 事件名不需要写on
- 指令可简写成@
- 绑定的方法定义在methods属性中
-
方法内部通过this关键字可以访问定义在data中的数据
image.png
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="double click" @dblclick="doIt">
<h2 @click="changeFood">{{ food }}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:"#app",
data: {
food: 'hot pot'
},
methods:{
doIt:function () {
alert(' do it ');
},
changeFood:function () {
this.food += ' delicious'
console.log(this.food)
}
}
})
</script>
</body>
v-on补充
- 传递自定义参数,事件修饰符
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上 .修饰符 可以对事件进行限制
-
.enter 可以限制触发的按键为回车
image.png
<body>
<div id="app">
<input type="button" value="click" @click="doIt(666,'lao tie')">
<input type="text" @keyup.enter="sayHi">
</div>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:"#app",
data:{
arr:['beijing','shanghai','guangzhou','shenzhen'],
food:[
{name: 'hot pot'},
{name: 'hot dry noodles'}
]
},
methods: {
doIt:function (p1,p2) {
console.log('do it')
console.log(p1)
console.log(p2)
},
sayHi:function () {
alert('岂料毛')
}
}
})
</script>
</body>
实例 - 计数器
image.png
<body>
<div id="app">
<div class="input-num">
<button @click="sub">
-
</button>
<span>{{ num }}</span>
<button @click="add">
+
</button>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:"#app",
data: {
num: 1
},
methods:{
add:function () {
if(++(this.num) > 10){
this.num = 10
alert('超过最大值')
}
},
sub:function () {
if(--(this.num) < 0){
this.num = 0
alert('超过最小值')
}
}
}
})
</script>
</body>
v-show
- 根据表达式的真假,切换元素的显示和隐藏
- 原理是修改元素的display,实现显示/隐藏
- 指令后面的内容,最终都会解析成布尔值
-
true -- 显示 , false -- 隐藏
image.png
<div id="app">
<input type="button" value="display" @click="changeIsShow">
<img v-show="isShow" src="img/read.png" alt="">
</div>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:18
},
methods:{
changeIsShow:function(){
this.isShow = ! this.isShow
}
}
})
</script>
v-if
- 根据表达式的真假,切换元素的显示和隐藏(操纵DOM元素)
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中.为false,从dom树中移除
<body>
<div id="app">
<input type="button" value="toggle" @click="toggleIsShow">
<p v-if="isShow">programmer</p>
<p v-show="isShow">programmer *</p>
<h2 v-if="temperature>=35">热死了</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:"#app",
data:{
isShow:false,
temperature:40
},
methods:{
toggleIsShow:function(){
this.isShow = ! this.isShow
}
}
})
</script>
</body>
v-bind
- 设置元素的属性(例如 src title class)
- v-bind:属性名
-
可简写成 :属性名
image.png
<body>
<div id="app">
<img :src="imgSrc" alt="" v-bind:title="imgTitle">
<img :src="imgSrc" alt="" v-bind:title="imgTitle" :class="isActive?'active':''" @click="toggleActive">
<img :src="imgSrc" alt="" v-bind:title="imgTitle" :class="{active:isActive}" @click="toggleActive">
</div>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:"#app",
data:{
imgSrc:'img/read.png',
imgTitle:'read',
isActive:false
},
methods:{
toggleActive:function(){
this.isActive = ! this.isActive
}
}
})
</script>
</body>
实例 - 图片切换
image.png
<body>
<div id="app">
<img :src="imgArr[index]" alt="">
<a href="#" @click="prevImg" v-show="index != 0" class="left">prev</a>
<a href="#" @click="nextImg" v-show="index != imgArr.length - 1" class="right">next</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:"#app",
data:{
imgArr:[
"img/0.png",
"img/1.png",
"img/2.png",
"img/3.png"
],
index:0
},
methods: {
nextImg: function () {
++this.index
},
prevImg: function () {
--this.index
}
}
})
</script>
</body>
v-for
- 根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是(item,index) in 数据
- item和index可以结合其他指令一起使用
-
数组长度的更新会同步到页面上,是响应式的
image.png
<body>
<div id="app">
<input type="button" value="add" @click="add">
<input type="button" value="remove" @click="remove">
<ul>
<li v-for="(item,index) in arr">{{ index + 1 }} city: {{ item }}</li>
</ul>
<h2 v-for="item in food" :title="item.name">{{ item.name }}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:"#app",
data:{
arr:['beijing','shanghai','guangzhou','shenzhen'],
food:[
{name: 'hot pot'},
{name: 'hot dry noodles'}
]
},
methods: {
add:function () {
this.food.push({ name:'chao fan'})
},
remove:function () {
this.food.shift();
}
}
})
</script>
</body>
v-model
- 获取和设置表单元素的值(双向数据绑定)
- v-model的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
-
绑定的数据<-->表单元素的值
image.png
<body>
<div id="app">
<input type="text" v-model="message" @keyup.enter="getM">
<input type="button" value="edit message" @click="setM">
<h2>{{ message }}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
var app = new Vue({
el:"#app",
data:{
message:'programmer'
},
methods: {
getM:function () {
alert(this.message)
},
setM:function () {
this.message = 'dkw'
}
}
})
</script>
</body>