Vue.js标签v-bind和v-on初探实例

Vue初探使用标签进行图片以及背景切换

本来这次作业还是想水一下饿,但是要是写太少的字数对曝光量不易,所以还是有水字数的必要,虽然说真的很语无伦次,不知所言,但是还是有必要说明情况,具体什么情况,且听接下来的分析。

script代码

html 复制代码
<script>
  const app=new Vue({
      el:"#zjw",
      data:{
          filename:"./img/李四1.jpg",
          flag:1,
          color:"background-color:red"
      },
      methods:{
          change:function (){
              if(this.flag==1){
                  this.filename="./img/李四1.jpg"
                  this.color="background-color:red"
                  this.flag=2
              }else if(this.flag==2){
                  this.filename = "./img/李四2.jpg"
                  this.color="background-color:blue"
                  this.flag=3
              }else{
                  this.filename="./img/李四3.jpg"
                  this.color="background-color:skyblue"
                  this.flag=1
              }
          }
      }
  })
</script>

body

html 复制代码
<body>
<div id="zjw" v-bind:style="color" style="width:700px;height: 500px">

    <img v-bind:src="filename" alt="李四" style="width: 380px;height:500px">
<button @click="change()">切换</button>
</div>
</body>

简单分析

v-bind绑定stylev-bind:style="color",我这里写的color,要做切换颜色的处理。而对于imgv-bind:src="filename",要进行切换照片的处理。

切换按钮<button @click="change()">切换</button>

@click就等于v-on

data

html 复制代码
data:{
          filename:"./img/李四1.jpg",
          flag:1,
          color:"background-color:red"
      },

methods

通过if ,else if ,else来进行3者的转换,这样在点击切换时就能进行3个图片以及div背景的转换了。

html 复制代码
methods:{
          change:function (){
              if(this.flag==1){
                  this.filename="./img/李四1.jpg"
                  this.color="background-color:red"
                  this.flag=2
              }else if(this.flag==2){
                  this.filename = "./img/李四2.jpg"
                  this.color="background-color:blue"
                  this.flag=3
              }else{
                  this.filename="./img/李四3.jpg"
                  this.color="background-color:skyblue"
                  this.flag=1
              }
          }
      }

结果示例



相关推荐
遂心_23 分钟前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark30 分钟前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_233333 分钟前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin36 分钟前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_1 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit1 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天1 小时前
ts中的函数重载
前端
卓伊凡1 小时前
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
前端
前端Hardy1 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css