七.Vue模板语法

Java架构师必看

发布于 2021-05-14 11:26:08

3130

发布于 2021-05-14 11:26:08

七.Vue模板语法

强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码

一.Vue初体验：https://blog.csdn.net/qq_43674132/article/details/104857216 二.Vue条件命令：https://blog.csdn.net/qq_43674132/article/details/104857322 三.Vue循环指令：https://blog.csdn.net/qq_43674132/article/details/104857517 四.Vue处理用户输入：https://blog.csdn.net/qq_43674132/article/details/104857651 五.Vue组件初体验：https://blog.csdn.net/qq_43674132/article/details/104857870 六.Vue实例：https://blog.csdn.net/qq_43674132/article/details/104857953 七.Vue模板语法：https://blog.csdn.net/qq_43674132/article/details/104858009 八.Vue计算属性：https://blog.csdn.net/qq_43674132/article/details/104858068 九.Vue.js侦听器：https://blog.csdn.net/qq_43674132/article/details/104860083 十.Vue.js的class绑定：https://blog.csdn.net/qq_43674132/article/details/104861826 十一.Vue style绑定：https://blog.csdn.net/qq_43674132/article/details/104877107 十二.Vue 条件渲染：https://blog.csdn.net/qq_43674132/article/details/104877177 十三.Vue 列表渲染：https://blog.csdn.net/qq_43674132/article/details/104877393 十四.Vue事件处理：https://blog.csdn.net/qq_43674132/article/details/104878173 十五.Vue表单输入绑定：https://blog.csdn.net/qq_43674132/article/details/104879776 十六.Vue中引用图片：https://blog.csdn.net/qq_43674132/article/details/107043105

Vue模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--{
  {a}}：插值方式 ，只能写在html元素里面-->
    <!--v-bind:disabled 可以简写为 :disabled    v-on:click可以简写为@click-->
    <div>{
  {a}}</div>
    <button :disabled="!enableBtn" @click="num++">按钮</button>
    <div v-html="a"></div>
    <div>{
  {num>101?'good':num}}</div>
    <a :href="mylink">百度</a>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            a:"<h1>hello liqnggang!</h1>",
            b:null,
            enableBtn:true,
            num:99,
            mylink:'http://www.baidu.com'
        }
        });
</script>
</body>
</html>

详情浏览器效果如下：