vue.js模板语法_Java开源博客系统-Powered by java1234

博客信息

vue.js模板语法

发布时间：『 2019-06-18 22:18』博客类别：Vue.js 阅读(3500) 评论(0)

结合官方用户指南；

我们这节主要掌握，插值显示，数据绑定，事件绑定以及js表达式，包括缩写语法；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>插入显示</h2>
    <input type="text" v-model="message">
    <p>{{message}}</p>
    <p>{{message.toUpperCase()}}</p>
    <p v-html="message"></p>
    <h2>数据绑定</h2>
    <div id="dynamicId"></div>
    <div v-bind:id="dynamicId"></div>
    <div :id="dynamicId"></div>
    <button v-bind:disabled="isButtonDisabled">Button</button>
    <a href="java1234">Java知识分享网</a>
    <a v-bind:href="java1234">Java知识分享网</a>
    <a :href="java1234">Java知识分享网</a>
    <br/>
    <h2>js表达式</h2>
    <p>{{ number + 1}}</p>
    <p>{{ ok ? 'YES' : 'NO'}}</p>
    <p>{{info.split(' ').reverse().join(',')}}</p>
    <p v-if="seen">现在你看到我了</p>
    <h2>事件绑定</h2>
    <button v-on:click="doSomething">按钮</button>
    <button @click="doSomething">按钮2</button>
    <br/>

</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            message:'<font color="red">呵呵</font>',
            dynamicId:'2',
            isButtonDisabled:true,
            java1234:'http://www.java1234.com',
            number:2,
            ok:false,
            info:'1 3 5',
            seen:false,
            attributeName:"href",
            url:'http://www.baidu.com'
        },
        methods:{
            doSomething(){
                alert('点我干嘛')
            }
        }

    })
</script>
</body>
</html>

关键字： vue 模板语法

上一篇：vue-cli · Failed to download repo vuejs-templates/webpack: unable to verifythe first certificate

下一篇：vue.js条件语句

关注Java1234微信公众号

博主信息

Java1234_小锋

(知识改变命运，技术改变世界)

按日志类别

按日志日期

友情链接