条件渲染h和v-bind绑定

条件渲染h和v-bind绑定

 <div id="app">
        <div v-if="ishow">
            显示
        </div>
        <div v-else>
            隐藏
        </div>
        <h2 v-show="show">小黑</h2>
        <a v-bind:href='res.url' v-bind:title='res.title'>{{res.name}}</a>
        <h3 v-bind:class="{activate:isActivte}">V-bind的用法</h3>
        <h2 :style='{color:iscolor,fontSize:fontsize+"px"}'>hskajfksabh</h2>
        <ul>
            <li v-for="sjsj in sdata">
                <h3>
                    {{sjsj.name}}
                </h3>
            </li>
        </ul>
    </div>
<script>
        // console.log(Vue);
        //2、初始化
        const vm = new Vue({
            el:'#app',
            //数据属性
            data:{
                ishow: Math.random() > 0.5,
                show:false,
                res:{
                    name:'百度',
                    url:'http://www.baidu.com',
                    title:'百度一下'
                },
                sdata:[{id:"1",name:"大腰子"},
                    {id:"2",name:"烤鸡翅"},
                ],
                isActivte:true,
                iscolor:'green',
                fontsize:50
            },
            //存放方法
            methods: {

            }
        });

    </script>
上一篇:c++的bind使用方法


下一篇:1.v-bind / v- model