初学Vue二-模板属性class及style

33次阅读

共计 4637 个字符，预计需要花费 12 分钟才能阅读完成。

完整代码链接

模板 {{}}

当所谓的数据（data）发生改变的时候，输出的内容会默认的重新渲染一遍，如果为了安全起见想数据只渲染一遍不再改动的话前面加个 * 就好了

模板 1
  • 当改成这样的时候点击按钮将不会再次渲染
html 部分：<input type="button" @click="fn" value="点我">
    {{*msg}}

js 部分：<script>
        new Vue({
            el:'body',
            data:{msg:'hello',},
            methods:{fn:function(){this.msg='change';}
            }
        })
    </script>
模板 2
  • Vue 中输出 data 为 html 代码应该怎么显示
  • 在 Vue 中 两个花括号 {{}} 相当于原生 js 的 innerText，三个花括号{{{}}} 相当于原生 js 的innerHTML。
html 部分：<style>
        div{
            width: 100px;
            height: 100px;
            background: black;
            color: white;
        }
    </style>

<body>
 // 尝试将这里改为两个看下是否正常显示 html 标签
{{{msg}}} 
</body>

js 部分：<script>
        new Vue({
            el:'body',
            data:{msg:'<div> 这里是一个 div</div>',}
        })
    </script>

注意：建议还是用两个花括号{{}}innerText，防止其他人恶意注入

属性 — 常用属性 class 及 style

属性 — src
html 部分：<style>
    img{
        height: 375px;
        width: 500px;
    }
    </style>
    <input type="button" value="change" @click="btn">
        // 这里的属性如果用原生 js 的话需要使用 vue 模板才能接收到 vue 对象中的 data
        //src="{{url}}"
    <img v-bind:src="url">
        
js 部分：new Vue({
        el:'body',
        data:{
            //num 是计数器开关，用于控制图片切换
            num:0,
            url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg",
        },
        methods:{btn:function(){
                this.num++;
                this.num%2==1?this.url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560472659224&di=896584de51fc9b26933157aed6a00ff7&imgtype=0&src=http%3A%2F%2Fimg08.oneniceapp.com%2Fupload%2Favatar%2F2018%2F05%2F05%2Faba7e29327a27abfcb1e525f623934ee.jpg":
                this.url="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg";
            }
        }
    })
  • 如果使用原生 js 的话需要使用 vue 模板 {{}} 如果使用 vue 方法的话则不需要
  • v-bind:scr="url"可以缩写前缀 vue 方法为冒号:src="url"，这样的写法 vue 也可以识别
属性 — class
  • 使用 vue 传输 innerText 的原理，传输文本作为类名
html 部分：<style>
       div{
           width: 100px;
           height: 100px;
           
       }
       .red{background: red;}
   </style>
    <input type="button" value="click" @click="btn">
    <div v-bind:class="myDiv"></div>
    <!-- 或者使用原生的 class="{{myDiv}}-->

js 部分：<script>    
        new Vue({
            el:'body',
            data:{myDiv:'red',}
   })
    </script>

  • 一般赋予多个类的话在 html 中是class="a b c"，而在 vue 中则是以数组或 json 格式，因为 json 是键值对格式的，相当于数组的下标与索引值的关系。

    • 什么是键值对格式 — key:value(例子：width:200px;)
    • 数组格式
html 部分：<style>
       div{
           width: 100px;
           height: 100px;
           
       }
       .red{background: red;}
       .shadow{box-shadow: 0 0 15px;}
   </style>

    <input type="button" value="click" @click="btn">
    <div v-bind:class="myDiv"></div>

js 部分：<script>
        // 最常用的属性‘class’‘style’new Vue({
            el:'body',
            data:{
                // 赋予多个 class 属性一般直接 'class="a b c"' 在 vue 中则使用数组形式
                //['a','b','c']
                myDiv:['red','shadow'],
            },
            methods:{
                // 切换 class
                // 方法‘pop()’是去除 class 的，方法‘push()’是插入 class 的
                // 如果只用‘pop’方法的话会一直去除 class 样式直到数组为空
                btn:function(){this.myDiv.length==1?this.myDiv.push('shadow'):this.myDiv.pop('shadow');
                }
            }
        })
    </script>
    • json 格式
html 部分：<style>
       div{
           width: 100px;
           height: 100px;
           
       }
       .red{background: red;}
       .shadow{box-shadow: 0 0 15px;}
       .animate{transition: 0.5s;}
   </style>

    <input type="button" value="click" @click="btn">
    <div v-bind:class="myDiv"></div>

js 部分：<script>  
        new Vue({
            el:'body',
            data:{
                // 使用 json 格式也可以
                myDiv:{
                    red:true,
                    shadow:true,
                    animate:true,
                    }
                },
                methods:{btn:function(){this.myDiv.shadow=!this.myDiv.shadow;}
            }
        })
    </script>

Style 三种传输格式

  • style 在 vue 中有三种传输格式

    • json
    • json 数组 – [json ,json ,json]
    • string
  • 其中 json 与 string 格式差不多
json 格式
  • 因为 style 原生的代码本来就是类似于 json 格式的，所以能用 json 格式传输不出奇
html 部分：<input type="button" value="cahnge" @click="btn">
<div v-bind:style="myDiv"></div>

js 部分：<script>
        new Vue({
            el:'body',
            data:{
                myDiv:{
                    width:"200px",
                    height:"200px",
                    background:"red",
                    transition:"0.5s"
                }
            },
            methods:{btn:function(){
                    this.myDiv.width="400px";
                    this.myDiv.height="400px";
                    this.myDiv.background="green";
                }
            }
        })    
    </script>
json 数组形式
  • 就像赋予多个类，每个类不同样式一样，你可以定义多个类赋予给同一个标签，同样的也相当于赋予一个标签多个不同作用域下的样式，用 json 数组形式赋予检查网页代码可以看到样式都给添加进去了
html 部分：<input type="button" value="cahnge" @click="btn">
// 这里给 style 赋予了两个样式    
<div v-bind:style="[myDiv,green]"></div>

js 部分：<script>
    new Vue({
    el:'body',
    data:{
        myDiv:{
            width:"200px",
            height:"200px",
            background:"red",
            transition:"0.5s"
        },
        green:{background:"green",}
    },
    methods:{btn:function(){
            this.myDiv.width="400px";
            this.myDiv.height="400px";
            this.myDiv.background="green";
        }
    }
})    
</script>

string 形式
  • string 形式其实和 json 格式的写法一样，但是特意拿出来说是因为他们的概念不一样，string 形式是利用 vue 的类似于 innerText 的操作来赋予样式的，而 json 形式的概念突出他的数据格式
html 部分：<input type="button" value="cahnge" @click="btn">
<div v-bind:style="myDiv"></div>

js 部分：<script>
        new Vue({
            el:'body',
            data:{
                myDiv:{
                    width:"200px",
                    height:"200px",
                    background:"red",
                    transition:"0.5s"
                }
            },
            methods:{btn:function(){
                    this.myDiv.width="400px";
                    this.myDiv.height="400px";
                    this.myDiv.background="green";
                }
            }
        })    
    </script>

小案例演示：vue-tab 面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab 面板 </title>
    <script src="../vue.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #ccc;
        }
        input.active{background: red;}
    </style>
</head>
<body>
    
<!-- $index 是当前按钮的下标值 -->
<input type="button" v-for="i in value" :value="i" :class="$index==index?'active':''" @click="btn($index)">
<div v-for="i in inner" v-show="$index==index?true:false" >
    {{i}}
</div>
    <script>
        new Vue({
            el:'body',
            data:{
                index:0,
                value:['leo','sky','li'],
                inner:['今年 18 岁了','今年 31 岁了','今年 22 岁了']
            },
            methods:{btn:function(myIndex){this.index=myIndex;}
            }
        })    
    </script>
</body>
</html>

正文完
vue.js
发表至： javascript
2019-06-14
 0
关于javascript:理解JS中的-call-apply-bind方法
前端性能优化JavaScript篇
使用CSS创建一个炫酷的球体动画效果
关于javascript:react中向组件内部动态传入标签带参数